Question

我尝试做的是 - 在应用程序准备就绪之前，它从一个外部文件中读取一些数据，制作一个新的动态＆＃34; li＆＃34; 基于文件内容然后它在html上呈现li。

只是添加一些解释 - 有两个＆＃34; li＆＃34;在代码中 1）动态li - 从文件读取一行后生成 2）静态li - 显示静态li

所以，每当我尝试点击＆＃34;静态链接＆＃34;它调用click事件并显示结果正常。但是，当我点击动态链接时，它不会触发点击事件

我注意到的另一件事是，当应用程序准备就绪时，它会显示＆＃34;它现在首先生成静态链接＆＃34;首先警告它显示＆＃34;它现在生成动态链接＆＃34;。潜在地，它应该显示＆＃34;动态链接＆＃34;先发出警报，然后发出静态链接警报。

HTML

<body>
    <div class="ui-page ui-page-active" id="main">

        <header>Open Fulfillment Order</header>

         <div id="ordersList" style="text-align: left">

            <ul id="dynamicList" style="text-align: left;padding-left: 70px;padding-top: 30px">
             </ul>
          </div>
    </div>
</body>

FILE.TXT

Order1, 3/15/2017, 2
Order2, 3/10/2017, 3
Order3, 3/30/2017, 4
order4, 3/20/2017, 2

Javascript文件 $（document）.ready（function（）{

            $.get('file/data.txt', function(data) {
               alert("its now generating dynamic link");

                var lines = data.split("\n");
                for (var prop in lines) {
                 var orderData = lines[prop];

                 var splittedData = orderData.split(","); 
                 // Dynamic link hard coded string will be repalced with actual order name
                 $("#ordersList ul").append('<li><a href="/user/messages"><span class="tab">Dynamic Link</span></a></li>');
                }

            });
            alert("its now generating static link first");
            $("#ordersList ul").append('<li><a href="/user/messages"><span class="tab">Static Link</span></a></li>');

     });


 $(document).ready(function() { //dom is now loaded in.
     $('#dynamicList li').click(function() {
         alert($(this).find('a').attr('data-value'));    // this will alert data-value value.
                  });
 });

知道为什么没有在动态链接上调用click事件？

Answer 1

问题可能是当你使用

时

$('#dynamicList li').click(function() {
         alert($(this).find('a').attr('data-value'));    // this will alert data-value value.
});

jQuery仅为页面上当前存在的li元素创建绑定。如果稍后添加li，请尝试使用此

$(document).on('click', '#dynamicList li', function() {
         alert($(this).find('a').attr('data-value'));    // this will alert data-value value.
});

通过jquery显示/读取数据时出现的问题

1 个答案: