用 Jquery On() 包装插件代码？答案

【问题标题】：Wrapping Plugin Code with Jquery On()?用 Jquery On() 包装插件代码？
【发布时间】：2016-05-30 18:07:34
【问题描述】：

很久没用jquery了，上次用query .live还是一回事。

现在我看到它已被替换为“开”（我个人不喜欢这个名字，它很难在谷歌上找到答案）

我正在使用 MaterialzieCss 及其模态对话框 $('.modal-trigger').leanModal();

但是我想按需加载模式代码（即，当点击链接时，它会执行 ajax 调用并获取对话框的 html，然后将其显示给用户）。

如何将$('.modal-trigger').leanModal(); 包裹在“on”中，以便在找到模态代码时绑定？

以前有一些 jquery 插件可以做到这一点，因为“live”无法做到这一点。还是这样吗？

编辑

这里有一些代码可能会让它更清晰。

当前

<body>
<a class="modal-trigger" data-target="add-modal">Open Modal </a>
<div id="add-modal" class="modal">
    <div class="modal-content">
        <p>Hi</p>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat left">Add</a>
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat ">Cancel</a>
    </div>
</div>
<script>
$(document).ready(function ()
{ 
     $('.modal-trigger').leanModal();
}
</script>
</body>

现在我想按需删除“#add-modal”。当您单击链接时，“模态”代码将添加到正文中。

也许我从提供的解决方案中不清楚，但每次调用$('.modal-trigger').leanModal(); 会创建新的绑定？我将拥有 5 个模态，所以不会每次都调用，所以如果我点击我的链接，它会像 5 个相同的模态一样打开？

【问题讨论】：

on() 不是你需要的。相反，您应该简单地调用 $('.modal-trigger').leanModal() inside 将 .modal-trigger 元素添加到页面的 AJAX 请求的回调函数。

标签： javascript jquery ajax materialize

【解决方案1】：

$(document).on('click', '#buttonid', function(e) {
    $.get('/getmodalcode')
     .done(function(data){
         $('#outputid').append(data);
         $('.modal-trigger').leanModal();
     });
});

希望它足够清楚，我已经正确解释了你的问题。

【讨论】：

【解决方案2】：

ajax 可能需要这样的东西：

$.ajax( "example.php" )
  .done(function(data) {
    $('.modal-trigger').leanModal();
  });

data 是，你猜对了，返回的数据。因此，如果您想将该数据用作模式的 HTML 输入，请执行以下操作。

$.ajax( "example.php" )
  .done(function(data) {
    $('.modal-trigger').html(data).leanModal();
  });

你说得对，在某些情况下.on() 是首选。最重要的用例是指导动态添加元素的冒泡事件。例如，如果#container 是一个静态元素，而.element 是动态添加的，则该元素将不起作用，因为在脚本首次运行时，该元素还不存在且未附加事件处理程序。

$(".element").click(function() {
  // Do something
});

相反，将点击处理程序分配给容器，但向下委派事件。

$("#container").on("click", ".element", function() {
  // Do something
});

因此，将所有内容放在一起：如果您想通过单击已动态添加的链接来运行 ajax 调用，并且成功时可以弹出模式：

$("#container").on("click", ".link", function() {
  $.ajax( "example.php" )
    .done(function(data) {
      $('.modal-trigger').html(data).leanModal();
    });
});

【讨论】：