Question

我正在构建Chrome扩展程序。我有一个简单的html文件（只包含一个div，一个图像和一个空表）。然后我回应了一些我从数据库中读取的表行和数据，我删除了一些细节，因为它可行。我发送一个ajax请求来检索echo-ed表行和数据，并将它们附加到前面提到的html文件中的表中。

这是php文件的外观，用'something'替换数据

//a few of these:
echo 
"<tr> 
<td> Something </td>         
<td> Something </td> 
<td> Something </td>
</tr>";

然后我有一个jquery脚本来处理将表的内容附加到表中，并且还应该处理任何表行单击。它发送该ajax请求并附加表数据就好了。这就是该脚本文件的样子

$(document).ready(function() {

                    $.urlParam = function(name){
                    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
                    if (results==null){
                       return null;
                    }
                    else{
                       return results[1] || 0;
                    }
                }

                $usern = $.urlParam('user');
                var div = document.getElementById('welcome');
                div.innerHTML = "Pozdravljeni, <a href='https://www.google.si' id='imeUser'><span>" + $usern + "</span></a>! <a href='dodajGeslo.html'><span id='dodajGeslo'> Dodaj Geslo </span></a>";
                $.ajax({
                    url: 'http://passvault.000webhostapp.com/qryGesla.php',
                    data: {user:$usern},
                    type: "GET",
                    success: function(data) {
                        $("#gesla").append(data);
                        $("#load").css("display", "none");
                    }
                });

                $('tr').click( function() {
                    alert('test');
                });

});

正如您在页面底部看到的，我为每个tr都有一个click功能，只有警报，但是当我点击行时它不起作用。有人可以帮助我，我不确定我的错误

Answer 1

您可能想要使用委派的事件。点击处理程序仅在加载页面时存在的<tr>上激活。添加事件处理程序的代码在填充表之前运行（它看起来像是通过ajax进行的）。

您需要在页面加载时已经存在的元素上设置事件，然后告诉它将事件委托给事件触发时存在的任何子元素（您选择的）。我将假设“gesla”元素满足此需求，因为您将数据附加到它，但如果没有，请选择DOM上方的另一个父元素（您可以使用document if没有别的东西适用，但为了表现，你应该选择最近的可用父母。）

$("#gesla").on("click", "tr", function() {
  alert("test");
});

有关详情，请参阅此处：http://api.jquery.com/on/（标题为“直接和委派活动”的部分）。

JQuery无响应点击功能

1 个答案: