脚本对最近创建的元素没有生效。

15 浏览
0 Comments

脚本对最近创建的元素没有生效。

我为管理列表创建了两个脚本。一个用于在页面中添加一个li元素并将其保存到数据库中，另一个用于删除它。事实是，当我创建一个li元素时，第二个脚本（删除一个）对其没有影响（我必须更新页面才能删除它）。我该如何使其起作用？

以下是两个脚本：

添加：

function afegir() {
    var fnom=document.getElementById('compranom').value;
    var fnum=document.getElementById('quantitat').value;
        $.ajax({
            data: {
                "nom": fnom,
                "num":fnum
            },
            url:   'afegir.php',
            type:  'post',
            beforeSend: function () {
            },
            success:  function (response) {
            if(response!="-1") {
                $('.llista').append('
  • '+fnom+'
    • ');
            }
            else{
            alert('Error');
            }
            }
        }); 
    }

    删除：

    $(document).ready(function(){
$(".list li").click(function() {
var fid=$(this).attr('id');
    $.ajax({
        data: {
            "id": fid
        },
        url:   'treure.php',
        type:  'post',
        beforeSend: function () {
        },
        success:  function (response) {
        if(response=="si") {
            $("#"+fid+"").remove();
        }
        else{
        alert('Error');
        }
        }
    }); 
});
});

    谢谢你的帮助。

    0

    2 答案

    0 Comments

    最近创建的元素没有应用脚本的原因可能是因为在创建元素之后，没有重新绑定事件。解决方法是使用事件委托（event delegation）来绑定事件。

    代码中的

    $(document).ready(function(){
 $(".list").on('click','li',function() {
    var fid=$(this).attr('id');
    $.ajax({
      data: {
        "id": fid
      },
      url:   'treure.php',
      type:  'post',
      beforeSend: function () {
      },
      success:  function (response) {
        if(response=="si") {
          $("#"+fid+"").remove();
        }
        else{
           alert('Error');
        }
       }
   }); 
 });
});

    在文档加载完成后，绑定了点击事件。但是对于最近创建的元素，这个事件绑定可能没有生效。为了解决这个问题，可以使用事件委托的方式来绑定事件。

    事件委托的原理是将事件绑定在父元素上，然后通过事件冒泡机制来触发事件。这样就可以保证即使是后来创建的元素也能够触发绑定的事件。

    具体做法是将绑定事件的代码改为：

    $(document).ready(function(){
 $(document).on('click','.list li',function() {
    var fid=$(this).attr('id');
    $.ajax({
      data: {
        "id": fid
      },
      url:   'treure.php',
      type:  'post',
      beforeSend: function () {
      },
      success:  function (response) {
        if(response=="si") {
          $("#"+fid+"").remove();
        }
        else{
           alert('Error');
        }
       }
   }); 
 });
});

    这样就可以确保最近创建的元素也能够触发绑定的事件。

    如果有关于事件委托的更多内容，请点击这里阅读更多。

    另外，代码中还提到了一个PHP错误：<br ></li> <b>Warning</b>: mysqli_fetch_array() expects parameter 1 to be mysqli_result, null given in <b>/home/s120321b/public_html/afegir.php</b> on line <b>9</b><br />，这是在afegir.php文件中的PHP错误。需要检查查询语句是否正确。

    不过这个错误与JavaScript无关，除非你发送给PHP的参数不正确。

    0
    0 Comments

    最近创建的元素上的脚本无效的原因是，脚本会在文档加载时绑定到元素上，而无法应用于后来创建的元素。这是因为脚本在绑定时只会将其应用于匹配当前选择器的元素，而对于将来创建的元素则不起作用。

    解决这个问题的方法是使用jQuery的live()方法。这个方法可以为当前选择器匹配的所有元素以及将来创建的元素附加事件处理程序。

    下面是使用live()方法解决这个问题的示例代码：

    $(document).ready(function(){
  $("#parentElement").live("click", ".newElement", function(){
    // 执行操作
  });
});

    在上面的代码中，live()方法被应用于父级元素#parentElement。当新元素.newElement被创建并添加到#parentElement中时，点击事件将被触发，并执行相应的操作。

    通过使用live()方法，可以确保最近创建的元素上的脚本也能生效，而不需要重新绑定事件处理程序。这是因为live()方法会自动为将来创建的元素绑定事件处理程序。

    总结起来，通过使用jQuery的live()方法，可以解决脚本无法在最近创建的元素上生效的问题。这个方法可以确保事件处理程序能够应用于当前选择器匹配的所有元素，包括将来创建的元素。这样可以避免重新绑定事件处理程序的麻烦，并提高代码的效率。

    0