0

使用 new[ish] .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 插件。但据我所知，我不能用新的 .on() 方法做到这一点

过去的工作：

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

但是现在，据我所知，我无法将新项目添加到 dom 中（如果是，则使用特定的标识符），因此我无法将插件绑定到可能尚不存在的事物上。这更有意义吗？

4

3 回答 3

0 
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 更改，那么您可以收听 Mutation 事件 [onpropertychange 事件，我们永恒的爱 IE]

于 2013-02-23T21:44:51.243 回答
0 
$(document).on('click', "#tester", function() {
    alert("Clicked");
    $('<div id="tester-2"></div>').appendTo('body');
    $('#tester-2').css("background", "red");
});
于 2013-02-23T19:46:54.960 回答
0

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 时触发某些内容，您可以使用自定义触发器：

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

从

使用 Jquery 将元素添加到页面时如何执行操作？

两者.bind.and.live都已替换.on为如上。

于 2013-02-23T20:49:00.847 回答