0

ユーザーが複数のページを通過しているように見えるように、JQueryにdivタグのコンテンツを変更させようとしています。私のやり方では、ユーザーがボタンを押すと、スクリプトが実行され、divの内容が変更されます。このように少なくとも3ページを作成したかったのですが、2ページ目以降に問題が発生しました。これが私がスクリプトに持っているものです：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$("#1").click(function() {
$("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />');
$("#rightPart").html('');
});

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});
});

したがって、IDが「1」の最初のページのボタンをクリックすると、画面が2番目のページに表示されるものに変わります。2番目のページにはいくつかのものが表示され、IDが「2」の別のボタンが作成されます。次に、IDが「2」の2ページ目のボタンをクリックしようとすると、何も実行されません。何か助けはありますか？ボタンが実際にHTMLにあるのではなく、スクリプトで作成されているためですか？

4

5 に答える 5

2

これは、クリックイベントにバインドした後にid = "2"のボタンが作成されるため、クリックイベントを再バインドしない限り、この新しいボタンは検出されません。より良いオプションは、click（）の代わりにon（）を使用することです。これにより、これが自動的に行われます。

$(document).ready(function() { 

    $("#1").on('click', function() { 
        $("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
        $("#rightPart").html(''); 
    }); 

    $("#2").on('click', function() { 
        $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
    }); 

});
于 2012-06-12T12:59:58.077 に答える
1

ボタンを動的に作成しているためです。.on()クリック イベントをデリゲートする には、 を使用する必要があります。#2dom の準備ができたときにボタンが作成されないため、機能していません。'body' は、選択したボタンの任意の親要素に置き換えることができます。また、番号は有効ではないため、ID として使用しないでください。

$('body').on('click','#2',function(){
于 2012-06-12T13:01:08.497 に答える
1

これを変える

$("#2").click(function() {
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});

に

$(document).on('click',"#2",function() {
   $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});

数値は有効な ID ではありません。有効な ID を使用してください。

于 2012-06-12T13:01:13.020 に答える
0

はい。これは、イベントがWebページに添付された時点で、ボタン「2」がDOMに存在しないためです。

使ってみてください

動的に作成された要素のイベントバインディングを参照することもできますか？' 多くのための。

于 2012-06-12T12:59:36.673 に答える
0

動的に作成されているからです。.onこの問題を回避するために使用できます

コードを変更します。

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});
});

に

$("#leftPart").on("click","#2",function() {
  $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input            type="text" id="glomp" value="glomp" name="glomp" >');
});

leftPartこれにより、現在および将来のID2の要素に上記のイベントハンドラーが確実に含まれるようになります。

于 2012-06-12T12:59:38.497 に答える