jQuery - 如何让.on事件为动态创建的HTML工作？

阅读最新jQuery 1.x库的新规范，它说使用.on来附加动态创建的jQuery元素的事件，但是，我似乎无法完成这项工作。在我$(document).ready功能我有以下几点：jQuery - 如何让.on事件为动态创建的HTML工作？

的jQuery：

$(".dropdown").on("click", function(event) { 
    event.preventDefault(); 
    var type = $(this).text() == '[ Read more... ]' ? 'expand' : 'collapse'; 
    var theDiv = type == 'expand' ? $(this).parent().next("div") : $(this).parent().prev("div"); 
    var theId = $(this).attr("id"); 
    $(this).parent().remove(); 
    var vText = theId == 'reqMat' ? 'Every candidate is required to submit a headshot and candidate statement.' : 'To strengthen your candidacy and let people know what you\'re all about, we invite you to create a campaign video.'; 

    theDiv.animate({height: 'toggle'}, 500, function(){ 
     if (type == 'expand') 
      theDiv.after('<p class="desc"><a href="#" class="dropdown" id="' + theId + '">[ Collapse Information... ]</a></p>'); 
     else 
      theDiv.before('<p class="desc">' + vText + ' <a href="#" class="dropdown" id="' + theId + '">[ Read more... ]</p>'); 

     if (theId == 'optMat' && type == 'expand') 
     { 
      var sVidWidth = $("#sampleVideo").width(); 
      $("#sampleVideo").css({'height': (sVidWidth/1.5) + 'px'}); 
     } 
     else if (theId == 'optMat' && type == 'collapse') 
     { 
      var iframe = $('#sampleVideo')[0]; 
      var player = $f(iframe); 
      player.api('pause'); 
     } 

     if (theId == 'reqMat' && type == 'expand') 
     { 
      handleBullets(); 
     } 
    }); 
});

好了，所以这将下拉[ Read more... ]文本，并把它变成一个[ Collapse Information... ]字符串，将下面去正被实际内容扩大。但是，当我点击[ Collapse Information... ]文本时，它不会折叠任何东西，而是会进入页面的顶部，因此具有href="#"，但使用.on应防止在应用event.preventDefault();时发生这种情况。

正在使用jQuery库在这里找到：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

我的HTML的布局像这样，如果这甚至事项：

<h4>Header 1</h4> 
<p class="desc">Brief description. <a href="#" id="reqMat" class="dropdown">[ Read more... ]</a></p> 
<div style="display: none;"> 
    <p>More information is in here...</p> 
</div> 
<h4>Header 2</h4> 
<p class="desc">Brief description. <a href="#" id="optMat" class="dropdown">[ Read more... ]</a></p> 
<div style="display: none;"> 
    <p>More information is in here...</p> 
</div>

我第一次点击它，它的工作原理，但第二时间，当显示[ Collapse Information... ]它根本不工作。所以它不会自动附加到动态创建的<p class="desc"><a href="#" class="dropdown" id="' + theId + '">[ Collapse Information... ]</a></p>。

为什么不呢？有什么我应该使用，而不是.on？我知道.live自jQuery 1.7以来不再使用。 .click将无法正常工作，因为我已经试过了。还有什么其他选择？

来源

2013-07-21 Solomon Closson

[无法获取jQuery on（）注册动态添加内容]（http://stackoverflow.com/questions/9698936/unable-to-get-jquery-on-to-register-dynamically-added -content） –

要获取on方法来注册委托事件处理程序（就像delegate方法一样），您需要为该元素指定一个选择器，并将其应用于已存在的元素。

例如：

$("body").on("click", ".dropdown", function(event) {

优选地，应该将它应用到尽可能接近到动态添加元素，而不是"body"父元素，以减少的范围尽可能。否则，需要为页面中发生的每次点击评估选择器".dropdown"。通常，您可以使用您添加动态内容的包含元素。

来源

2013-07-21 23:30:23 Guffa

不错，但在IE9及以下版本中无法使用。 IE9及以下版本会发生什么情况如下：点击'[Read more ...]'链接将其展开，点击'[Collapse Link ...]'将其折叠起来，但应该点击'阅读更多...]再次链接，在完成脚本的这一部分后停止：'$（this）.parent（）。remove（）;'。使用jQuery的重点在于它可以跨浏览器工作。这不是真的！ –

没有想到，在IE中找出问题，遗失了一个关闭''标签。 Doopppee！ –

我做了$（document）.on（“change”，“。searchFields”，function（event）{}并且像一个魅力一样工作！我有问题，因为我没有使用$（document）.on，说$（“。searchFields”）。如果您动态插入该类与该类将无法正常工作，但我的解决方案，希望这可以帮助某人。 –

jQuery - 如何让.on事件为动态创建的HTML工作？

回答

相关问题