Question

我如何重写我的所有脚本或更好的方案，让它们在动态添加的内容中运行？

示例theese：

jQuery(".chosen-select").chosen({
    ...
});

如果我将其更改为

$(document).(".chosen-select").chosen({
    ...
});

它仅适用于已加载的内容，但不处理动态添加的内容。如果这样可行会很好：D

{{1}}

请帮助。在modals，divs中通过ajax加载很多东西......必须有办法统一这个吗？！

Answer 1

您无法处理动态元素的插件初始化，例如您如何进行事件委派。

要处理来自动态创建元素的事件，您可以使用事件委派。

但是对于插件初始化，您需要在创建元素后调用插件。

所以

function initialize($el){

    $(".chosen-select", $el).chosen({
      disable_search_threshold: 10,
      width: "100%"
    });

    $('.fdatepicker', $el).fdatepicker({
        language: 'de',
        format: 'dd.mm.yyyy',
        weekStart:1
    });

}

然后

$(initialize);// to handle already present elements

然后在加载动态elemnet之后再次调用initialize方法，如

$(el).html(content);
initialize($(el));

Answer 2

来自Chosen documentation：

动态更新动态

如果您需要更新选择字段中的选项并想要选择   要获取更改，您需要触发选择：更新＆＃34;   在球场上的事件。 Chosen将根据更新后重新构建自己   内容。
$("#form_field").trigger("chosen:updated");

加载动态内容后，请调用上面的内容以触发选择以获取更改。

请注意，您仍然需要在元素上调用$(...).chosen;以上只是在选项列表发生变化时进行更新。

以下是添加新<select>并更改现有选项的示例。

＆＃13;

$(function() {
  // Register the first select
  $(".chosen-select").chosen();
    
  setTimeout(function() {
    // New select added
    $('<select id="second" class="chosen-select">' +
         '<option value="Second">Second</option>' +
      '</select>')
      .appendTo('body')
      .chosen();
      
    // Existing select updated
    $("#first")
      .empty()
      .append($("<option/>").val("Changed").text("Changed"))
      .append($("<option/>").val("Another").text("Another"))
      .trigger("chosen:updated");
  }, 2000);
});

＆＃13;

select {
    width: 100px;
}

＆＃13;

<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="first" class="chosen-select">
  <option value="First">First</option>
</select>

＆＃13;

Answer 3

您可以使用.on（）（1.7+或.delegate（））将事件侦听器绑定到动态添加的内容。

    $(document).on('eventName', '.chosen-select', function(){

您拥有的另一个选项是使用pageLoad()函数而不是$(document).ready()来绑定您的事件侦听器。

即使在使用AJAX调用返回异步请求之后，也会调用

pageLoad。

对于已加载和动态添加内容的委托或“加载”版本是什么？

3 个答案:

动态更新动态