Question

我的方法看起来有点像这样：

function turnBlue()
{
    $(this).css('background-color','blue');
}

function fillWithGoodies(obj)
{
    var goodie_box = $("<div id='goodie_box'>Goodies!  Click me and my parent will turn blue.</div>");
    $(obj).append(goodie_box);
    $(goodie_box).on('click', obj, turnBlue);
}

问题是当调用turnBlue（）时，“this”是goodie_box div，而不是obj。（我想要对象）

JQuery过去常常使用.selector（）方法，但使用起来并不安全。 http://api.jquery.com/selector/如果有效，我会做的：

    $(goodie_box).on('click', $(obj).selector(), turnBlue);

有没有办法在不改变架构的情况下做到这一点？

注意：我知道我可以在下面做，但我的例子只是真实代码的一个子集。我的问题是：你能以某种方式得到一个对象的选择器。

    // Don't want to have to do this:
    $(obj).on('click', function() { doSomething(obj) } );

注意＃2 ：调用parent（）不是这个问题的解决方案：真实代码创建一个复杂的动态对象，而父代可以处于任何深度。

Answer 1

有许多选择器，CSS类，伪类等组合具有无可比拟的可能性。我认为实施它是不切实际的。您的链接还说 ...属性从来都不是可以使用的选择器的可靠指标...

此外，selector属性不是您可能理解的使用方式。请在文档中注意： 选择器字符串，用于过滤触发事件的所选元素的后代

但是有可能将数据传递给处理程序。文档样本：

function greet(event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

因此，在您的情况下，它将如下所示：

function turnBlue(event) {
    $(event.data).css('background-color','blue');
}

function fillWithGoodies(obj) {
    var goodie_box = $("<div id='goodie_box'>Goodies!  Click me and my parent will turn blue.</div>");
    $(obj).append(goodie_box);
    $(goodie_box).on('click', obj, turnBlue);
}

Answer 2

你能这样做吗？

function doSomething(that)
{
    console.log(that);
}

function fillWithGoodies(obj)
{
    $(obj).append("<div id='goodie_box'>Goodies!</div>");
    $(obj).click(function(){
      doSomething(obj);
    });
}

Answer 3

如果您在on([selector])中放置一个参数并且它不是选择器，它将转向[data]，因此您可以尝试：

function turnBlue(e)
{
    $(e.data).css('background-color','blue');
}

function fillWithGoodies(obj)
{
    var goodie_box = $("<div id='goodie_box'>Goodies!  Click me and my parent will turn blue.</div>");
    $(obj).append(goodie_box);
    $(goodie_box).on('click', obj, turnBlue);
}

有关详情，请参阅passing data in jQuery.on()

JQuery on（）委托由元素而不是字符串选择器

3 个答案: