jquery on click ID仅适用于第一个输出

对于有链接列表的仪表板，如果有人单击删除按钮，我想执行一些操作。但不知何故，它只在第一个链接上以id =“delete_link”作出响应。我需要改变什么才能让这项工作适用于所有的尼克斯？jquery on click ID仅适用于第一个输出

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"); 
     } 
    }); 
});

提前感谢！

来源

2015-03-25 user3428971

你有一个''的'while'循环。摆脱它或将其切换为“班级”。 – D4V1D 2015-03-25 10:36:34

检查我的答案 – 2015-03-25 11:55:46

使用下面的代码。将类“delete_link”分配给元素而不是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"); 
    } 
    }); 
});

来源

2015-03-25 10:34:59

在HTML中，Ids必须是唯一的。如果您有多个元素，则应使用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 
});

来源

2015-03-25 10:36:10 Satpal

jquery on click ID仅适用于第一个输出

回答

相关问题