如何使用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綁定到非用戶啓動的函數（）

回答

相關問題