如何使用jQuery.on绑定到非用户启动的函数（）

使用新的[ish] .on语法很容易绑定到用户触发的事件。例如：如何使用jQuery.on绑定到非用户启动的函数（）

$(document).on('click', '#my-div', function() { 
    alert("You clicked it!"); 
});

但绑定到用户可能不会触发的事情呢？

$(document).on('somethingaddedtoDOM', '#my-element', function() { 
    alert("Nothing"); 
});

这是一个jsFiddle，让我更好地了解我在说什么。 http://jsfiddle.net/NedRW/3/

好吧，这里有一个类似的问题。假设我想动态地将一个滑块添加到DOM中。 sudoSlider为这个例子。让我们用Mustache.js和Mustache.jquery插件：

的Html

... 
<div id="slider-target-container"> 
</div> 
...

视图模型：

var viewModel = [ 
    { 
     image: "path-to-image" 
    }, 
    { 
     image: "path-to-image" 
    }, 
    { 
     image: "path-to-image" 
    } 
];

胡子模板

<script type="text/html" id="slider-template"> 
    <div id="slider"> 
     <ul> 
      <li>{{image}}</li> 
     </ul> 
    </div> 
</script>

的Javascript

$(document).ready(function() { 
    $.Mustache.addFromDom(); 
    var html = $('#slider-template'); 
    $('#slider-target-container').appendTo(mustache.render(html, viewModel); 
});

现在，显然我需要在我新创建的滑块HTML上调用sudoSlider插件。但我不能做到这一点与新。对（）方法，据我可以告诉

用什么来工作：

$('#slider').live(function() { 
    $(this).sudoSlider(); 
});

但是现在，据我所知，我有没有办法，如果一个新的项目被添加到DOM（如果是这样，具有特定的标识符），所以我没有办法将插件绑定到可能还不存在的事情。这是否更有意义？

来源

2013-02-23 Jedediah

正是这样......我不明白你的问题。由于用户不会创建触发处理程序的事件，因此您必须以编程方式触发它。但由于你的问题是关于约束力，而不是触发，所以我很困惑。你试图做什么？ – 2013-02-23 19:44:14

$(document).on('click', "#tester", function() { 
    alert("Clicked"); 
    $('<div id="tester-2"></div>').appendTo('body'); 
    $('#tester-2').css("background", "red"); 
});

来源

2013-02-23 19:46:54 bobthyasian

对不起，我写这个时很累。基本上我的意思是说div-2会被动态地插入到dom中。我已经编辑了相应的小提琴，如果你可以再看一遍http://jsfiddle.net/NedRW/3/ – Jedediah 2013-02-23 19:51:17

@ Hg3请描述你正在尝试做什么，而不是你错误地想到的方法的问题它。谷歌为“XY问题” – Alnitak 2013-02-23 19:59:24

我实际上在谈论将涉及粘贴在这里很多代码。我试图尽可能简化它。 – Jedediah 2013-02-23 20:04:55

jQuery的活文档描述了如何.on取代.live得好：

http://api.jquery.com/live/

看你上面的例子，我认为一些：

<div id="slider"> 
    <ul> 
     <li>{{image}}</li> 
    </ul> 
</div>

添加到

<div id="slider-target-container"></div>

这将创建一个具有相同ID（#slider）元素，以便让我们做吧：

<div class="slider"> 
    <ul> 
     <li>{{image}}</li> 
    </ul> 
</div>

代替。

$(document).on("click", "#slider-target-container .slider", function(){ 
    alert("Clicked"); 
});

然后希望你在找什么？

如果你想触发的东西，每当一个特定的新元素被添加到您可以使用自定义触发DOM：从

How to do an action when an element is added to a page using Jquery?

两个.bind

http://www.michaelhamrah.com/blog/index.php/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

。和.live已被.on替代如上。

来源

2013-02-23 20:49:00 sunn0

这仍然绑定到单击事件。在这种情况下，我假设滑块导航。问题是，如何将插件绑定到不存在的整个树上？ – Jedediah 2013-02-23 20:53:31

请参阅http://stackoverflow.com/questions/1490313/how-to-do-an-action-when-an-element-is-added-to-a-page-using-jquery和http：// www。 michaelhamrah.com/blog/index.php/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/ – sunn0 2013-02-23 21:07:57

But what about binding to things the user might not trigger?

我没有完全理解你的问题，但根据我的理解，我列出的解决方案如下：

// add a click handler to an element that doesn't yet exist 
$('document').delegate('#contentToBeAdded', 'click', function(e) { 
    // do something 
    // example use case would be content added using AJAX or from any manipulation user has not triggered. 
}); 

// even handle a custom event for an element 
$('document').delegate('#contentToBeAdded', 'custom-event', function(e) { 
    // do something and in this case I assume 'somethingAddedToDOM' is a custom event thrown by user 
});

希望它能帮助。

编辑：如果有问题的功能是DOM的变化，那么你可以听突变事件[onpropertychange事件对我们的永恒的爱IE]

来源

2013-02-23 21:44:51 gashu

如何使用jQuery.on绑定到非用户启动的函数（）

回答

相关问题