0

我的JS如下：

$(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>

我编写了该代码以在更改文本框时调用 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 一样工作。因此，如果 input#title-3 发生更改，我希望通过 POST 将更改上传到我的 PHP 脚本。

重要提示：盒子的数量是动态的。

4

3 回答 3

2 
$(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 中删除标题来计算

于 2013-08-07T08:12:17.087 回答
0

我想你的答案就在这里：

我编写了该代码以在更改文本框时调用 php 文件。

那个脚本（jQuery我猜）它必须与$('#xxx1').onchange()权利相关联？（或类似
的）如果你修改函数，在输入字段中添加一个类（也在php中），每次调用函数时，重新开始监听。我认为你可以调用任何你可能想要的函数。

示例（猜测您的代码）

HTML

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

jQuery

// 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...
  });
}

PHP

// some code....
// some code....
// remember here to add "dynamicDiv" as a class in the object
return object;
于 2013-08-07T08:55:55.493 回答
-1

由于您的元素是动态生成的，因此您需要使用事件委托，然后您可以使用[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 的最近父级，而不是绑定到文档

于 2013-08-07T08:25:24.737 回答