Question

我使用jquery已经有一段时间了，我最后一次使用查询.live仍然是一件事。

现在我看到它已被＆＃34; On＆＃34; （我个人不喜欢这个名字，这让谷歌很难找到答案）

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

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

如何将$('.modal-trigger').leanModal();包裹在＆＃34; on＆＃34;所以它在找到模态代码时会受到约束吗？

之前使用的是一些jquery插件，因为＆＃34; live＆＃34;无法做到这一点。这仍然是这样吗？

修改

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

当前

<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>

现在我要删除＆＃34; #add-modal＆＃34;随需应变。当您点击＆＃34;模态＆＃34;代码将被添加到正文中。

也许我不清楚所提供的解决方案，但每次调用$('.modal-trigger').leanModal();都会创建新的绑定？我会喜欢5个模态，所以每次都不会打电话，如果我点击我的链接，它会在一个点上添加它会像5个模态一样打开吗？

Answer 1

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

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

Answer 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();
    });
});

用Jquery On（）包装插件代码？

2 个答案: