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僅適用於第一個輸出

回答

相關問題