Javascript 一组动态元素的委托事件处理程序

我的建议如下：

$(document).ready(function(){
    $('#data1').change(function(){
        title = $('#title1').val();
        url = $('#url1').val();
        $.post('library/edit.php',{title:title, url:url},function(res){
            alert ("updated !");
        });
    });
});

以及我的HMTL标记：

<div id="data1">
<input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" />
</div>

我编写的代码是在更改textbox时调用PHP文件。 该代码按预期工作

但现在我添加了更多文本框，如下所示：

<div id="div1"><input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" /></div>
<div id="div2"><input name="title2" type="text" id="title2" />
<input name="url2" type="text" id="url2" /></div>
<div id="div3"><input name="title3" type="text" id="title3" />
<input name="url3" type="text" id="url3" /></div>

现在我想要相同的功能，这样这些文本框中的任何一个都可以像我前面代码中的title1一样工作。因此，如果输入#title-3发生更改，我希望通过POST将更改上传到我的PHP脚本中

重要提示：框的数量是动态的

$(document).ready(function(){
$('#data1').on('change','[id^=title],[id^=url]',function(){

    var index = $(this).attr('id').replace('title',"").replace('url',"");

    var title = $("#title" + index).val();
    var url = $("#url" + index).val();
    var hid = $("#hid" + index).val();
    // you can put in here in sequence all the fields you have
    $.post('library/edit.php',{title:title, url:url, hid : hid},function(res){
        alert ("updated !");
    });
});

});

因此，根据这个答案，如果任何id以标题开头的文本框发生更改。 将调用传入的函数。

---

indezx变量将存储正在更改的元素组的索引。然后通过从title1或title2中删除title来调用，因为元素是动态生成的，您需要使用事件委派，然后您可以使用

[id^=“value”]

根据其id属性的第一部分选择适当的元素

$(document).ready(function(){
    $(document).on('change','[id^="data"]',function(){
        var title = $(this).find('[id^="title"]').val();
        var url = $(this).find('[id^="url"]').val();
        var hidden = $(this).find('[id^="hid"]').val();
        $.post('library/edit.php',{title:title, url:url, hid:hidden},function(res){
            alert ("updated !");
        });
    });
});

---

注意：我建议您绑定到页面加载时出现的数据div的最接近父级，而不是绑定到文档

我想答案就在这里：

我编写的代码是为了在文本框发生变化时调用php文件

该脚本（

jQuery

我猜）必须与

$（'#xxx1'）.onchange（）关联，对吗？（或类似产品）

如果修改该函数，请向输入字段（也在php中）添加一个类，并且每次调用该函数时，都要重新开始侦听。。我想你可以调用任何你想要的函数

示例（猜测代码）

HTML
PHP
问题是什么？我不确定我是否理解。他的意思是动态参数是更新后的标题和url。我需要的是将动态参数发送到php文件。您是否为每对输入都有一个数据div，还是只有一个数据div包装它们？另外，当url或标题更改时，是否要进行ajax调用？@koala_dev我可以为每对输入添加div。我需要你的想法！！！！hi Parv..请告诉我“^=”的含义是什么？它是一个通配符，[id^=title]表示id属性以titlehi@ParvSharma开头的所有元素。如果该分区中有任何元素发生更改，我需要将thress元素传递给php文件。。。我更新代码请帮助此变量索引是什么？？title1 url1 hid1 title2 url2 hid2 title3 url3 hid3对于动态添加的元素以及页面加载时不存在的元素，这将不起作用time@kola_dev我需要传递一个隐藏值，也需要如何传递？@user2645118您是否尝试过该代码？我假设您的div id是data1、data2等，如第一个示例所示，如果它们是div1、div2，则相应地更改选择器
<div id="data1" class="dynamicDiv">
  <input name="title1" type="text" id="title1" />
  <input name="url1" type="text" id="url1" />
</div>

// enable the function on document ready
$(document).ready(function(){
  startListening('.dynamicDiv');
});

// each time an ajax call is completed,
// run the function again to map new objects
$(document).ajaxComplete(function(){
  startListening('.dynamicDiv');
});

// and finally the function
function startListening(obj){
  $(obj).onchange(function(){
    // ajax call
    // function call
    // or whatever...
  });
}

// some code....
// some code....
// remember here to add "dynamicDiv" as a class in the object
return object;