Question

对于有链接列表的仪表板，如果有人点击删除按钮，我想执行某些操作。但不知何故，它只响应id =＆＃34; delete_link＆＃34;的第一个链接。我需要做些什么才能让这对所有lniks都有效？

Php代码：

if($count < 1) {
        echo "There are no links in this category yet";
    }

while($link = $query->fetch(PDO::FETCH_OBJ)) {
    echo "<li><a href='" . $link->url . "' TARGET='_BLANK'>" . $link->title . "</a>";
    if($_SESSION['role'] == '2') {
        echo "<span style='float:right;opacity:0.85;' class='glyphicon glyphicon-pencil'></span><span style='float:right;opacity:0.85;margin-right:10px;' id='delete_link' data-linkid='" . $link->id . "' class='glyphicon glyphicon-remove'></span>";
    }
    echo "</li>";
}
echo "</ul>
        </div>
            </div>";
}

Jquery的：

$(document).ready(function(){

    $('#delete_link').click(function(){
        var dataId = $(this).data('linkid');
        var confirmDelete = confirm("Are you sure you want to delete this link?");
        if(confirmDelete == true) {
            alert(dataId);
            // $.ajax({
                // type: "POST",
                // url: "delete_link.php",
                // data: ""
            // })
        }else {
            alert("FALSE");
        }
    });
});

提前致谢！

Answer 1

在HTML中，ID必须是唯一的。如果您有多个元素，则应使用classes。

echo "<span class='delete_link' data-linkid='" . $link->id . "' class='glyphicon glyphicon-remove'></span>";

脚本，使用class selector绑定事件

$('.delete_link').click(function(){
   //Your code will work fine
});

Answer 2

使用下面的代码。分配课程＆＃39; delete_link＆＃39;元素而不是id。

    echo "<span style='float:right;opacity:0.85;' class='glyphicon glyphicon-pencil'></span><span style='float:right;opacity:0.85;margin-right:10px;' class='delete_link' data-linkid='" . $link->id . "' class='glyphicon glyphicon-remove'></span>";

id在DOM中必须是唯一的。所以事件只适用于具有相同id的i元素。

您还需要检查Event delegation以将事件附加到动态创建的元素。事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$(document).ready(function(){

  $(document).on('click','.delete_link',function(){
      var dataId = $(this).data('linkid');
      var confirmDelete = confirm("Are you sure you want to delete this link?");
    if(confirmDelete == true) {
        alert(dataId);
        // $.ajax({
            // type: "POST",
            // url: "delete_link.php",
            // data: ""
        // })
    }else {
        alert("FALSE");
    }
  });
});

点击ID上的jquery仅适用于第一个输出

2 个答案: