1

クラス名として「item-submit」を持つボタンが複数あります。ボタンがクリックされたときに、以下のコードに示すようにコンテンツを動的に追加したかったのです。つまり、クリックイベントは最初のボタンでのみ呼び出されます。別のボタンをクリックしてもコンテンツは追加されず、さらに悪いことに、ページ全体が再読み込みされます。コードからわかるように、変数テーブルは動的に作成されたorder-tableに追加されています。これは、コンテンツを追加したい場所にアイテム送信ボタンがある場所でもあります。

jQuery(".item-submit").each(function(){
        jQuery(this).click(function(){
            alert("aw");
            var id = jQuery(this).attr("id");
            var size = jQuery("#items"+id).val();
            alert("ID: "+ id);
            var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
            for(i=0; i<size; i++) {
                table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
            }
            table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
            jQuery("#order-table"+id).append(table);
            jQuery("#items"+id).attr("readonly","readonly");
            jQuery("#"+id).attr("disabled","disabled");
            return false;
        });
    });

jQuery（ ""）。click（）も試しましたが、まだ何もありません。

誰かが私を助けてくれたら、私はそれを大いに感謝します。また、不明な点がございましたら、お気軽にコメントをお寄せください。ありがとうございました。

4

5 に答える 5

0 
    jQuery(".item-submit").click(function(){
        alert("aw");
        var id = jQuery(this).attr("id");
        var size = jQuery("#items"+id).val();
        alert("ID: "+ id);
        var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
        for(i=0; i<size; i++) {
            table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
        }
        table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
        jQuery("#order-table"+id).append(table);
        jQuery("#items"+id).attr("readonly","readonly");
        jQuery("#"+id).attr("disabled","disabled");
        return false;
    });

この場合、各ループは必要ありません。クラス全体にクリックイベントを指定するだけで、「これ」がクリックしたものになります。

于 2012-09-11T11:58:09.383 に答える
0

jQueryセレクターを反復処理する必要はありません。これは、バグの原因でもあります。コードはおそらく次のようになります。

    jQuery(".item-submit").click(function(){
        alert("aw");
        var id = jQuery(this).attr("id");
        var size = jQuery("#items"+id).val();
        alert("ID: "+ id);
        var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
        for(i=0; i<size; i++) {
            table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
        }
        table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
        jQuery("#order-table"+id).append(table);
        jQuery("#items"+id).attr("readonly","readonly");
        jQuery("#"+id).attr("disabled","disabled");
        return false;
    });
于 2012-09-11T11:58:30.770 に答える
0 
$(".item-submit").click(function() {

});

使用する正しい構文です-自分で繰り返す必要はありません。

javascriptコンソールにエラーが表示されていますか？

于 2012-09-11T11:58:42.517 に答える
0

jQuery（'。item-submit'）。clickを使用できます...

エラーがあると思います。エラーが発生した後のすべてのスクリプトが無視され、falseステートメントが返されるため、ページがリロードされるのはそのためです。リロードすると、Firebug（コンソール）内のエラーは表示されません。

何が起こっているかを確認するには、最初の行でpreventDefaultを使用します。

jQuery(".item-submit").click(function(event){
    event.preventDefault();
    // ... your code here
});

このようにして、コードにエラーがあったとしてもページはリロードされず、それをキャッチして修正することができます。幸運を。

于 2012-09-11T12:26:43.677 に答える
0

私はそれをすべて理解しました。問題は、ボタンが動的に作成されることです。何が起こったのかはよくわかりませんが、追加された新しいコンテンツのスクリプトが読み込まれていないためだと思います。私がしたことは、追加されたすべてのコンテンツにクリック機能を追加することでした。うまく機能しているようです。

于 2012-09-12T01:28:23.657 に答える