javascript - 如何使用 jquery $.proxy 事件附加获取当前选定的值

Question

我有以下代码集。但是当我尝试从 clickOnLi 获取 id 时，我得到了未定义的信息。我正在使用 jQuery $.proxy 来附加事件处理程序。

演示 HTML

<div id="container">
    <ul>
        <li data-id="a">Apple</li>
        <li data-id="b">Ball</li>
        <li data-id="c">Colombo</li>
        <li data-id="d">Dayawansa</li>
        <li data-id="e">Ela kiri</li>
        <li data-id="f">Fundametals</li>
    </ul>
    <p class="display"></p>
</div>

演示 JavaScript

var myObject = function () {
        this.container = $('#container');
        this.init()
    };

    myObject.prototype = {

        constructor: myObject,

        init: function () {
            console.log("init");
            this.setListeners();
        },

        setListeners: function () {

            var proxy = $.proxy(this.clickOnLi, this, {'context': this, 'foo': "bar"});
            this.container.find('li').on('click', proxy);

            // This is working
            //this.container.find('li').on('click',{'context': this},this.clickOnLi);
        },

        clickOnLi: function (param) {
            var mContext = param.context;
            mContext.container.find('.display').html($(this).data('id'));
            console.log($(this).data('id')); // get undefined

            // This is working
            //mContext.container.find('.display').html($(this).data('id'));

        }
    };

    $(function () {
        new myObject();
    })

但是我没有使用 $.proxy，而是使用了如下

this.container.find('li').on('click',{'context': this},this.clickOnLi);

它将完美地工作。我在这里缺少什么。

https://jsfiddle.net/umanda/Lxdy4xh4/3/

Answer 1

您是否尝试过以这种方式访问​​它

$(this).attr('data-id');