Question

我有一个看起来像这样的页面..

<!DOCTYPE html>
<html>
<head>
  <title>JQM</title>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
  <script>
    $(function(){
      $('[data-role="list-divider"]').toggle(function(){
        $('.'+$(this).attr('data-link')).addClass('show');
        $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

      },function(){
        $('.'+$(this).attr('data-link')).removeClass('show');
        $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
      });
    });
  </script>
</head>
<body>

<div data-role="page">
    <div data-role="header">

    </div>
    <div data-role="content">   


    </div>
</div>

</body>
</html>

我在内容区域的服务器中以动态方式添加html。问题是，当我动态添加内容时，我在页面上静态创建的jquery函数不会参与..

<script>
        $(function(){
          $('[data-role="list-divider"]').toggle(function(){
            $('.'+$(this).attr('data-link')).addClass('show');
            $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

          },function(){
            $('.'+$(this).attr('data-link')).removeClass('show');
            $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
          });
        });
      </script>

如果我静态添加html，所有代码都可以正常工作，一切都很好。我的问题是，如果将html从服务器添加到页面，我该如何使这个jquery可以运行？

我已经完成了这项工作，是否有更优雅的方式使用.on或者这样好吗？

//got html blob
  deferred.success(function (res) {

   $(function () {
                $('[data-role="list-divider"]').toggle(function () {
                    $('.' + $(this).attr('data-link')).addClass('show');
                    $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

                }, function () {
                    $('.' + $(this).attr('data-link')).removeClass('show');
                    $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
                });
            });
 });

Answer 1

查看您的代码，我看不到您动态加载内容的位置。但是，如果您希望该脚本运行。您应该在该脚本前面尝试document.ready（）

Answer 2

您无法将事件处理程序绑定到尚未创建的元素。看看这个：

http://api.jquery.com/on/

Answer 3

您必须使用jquery .On()方法将事件处理程序附加到动态添加到页面的内容。检查一下 - .on

这样的东西可能有用（没有测试）： -

  $(function(){
      $('[data-role="list-divider"]').on('toggle' ,function(event){
        $('.'+$(this).attr('data-link')).addClass('show');
        $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

      },function(event){
        $('.'+$(this).attr('data-link')).removeClass('show');
        $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
      });
    });

Answer 4

由于当文档准备好并且您的内容未加载时，当前运行了jquery，因此它将找不到元素并将事件连接起来。将脚本添加到ajax.success可以解决您的问题。

Answer 5

试试这个：

    $(function(){
      $(document).on('toggle', '[data-role="list-divider"]', function(){
        $('.'+$(this).attr('data-link')).addClass('show');
        $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

      },function(){
        $('.'+$(this).attr('data-link')).removeClass('show');
        $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
      });
    });

但是，Haven没有测试过它。对于开启（＆＃39;点击＆＃39;），这通常有效。

你做的是绑定＆＃39;切换＆＃39;触发整个文档（$（document）），然后检查触发了哪个元素。这样，您就可以检测在DOM初始化之后创建的元素。

使用动态添加的Html在运行时自定义Jquery不可用

5 个答案: