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 に答える