1

誰が間違っていますか。2 つのボタンを作成します。1 つは html で、もう 1 つは jQuery です。「HTML作成」をクリックすると、メッセージが表示され、ボタンが作成されます。「jQuery creat」をクリックすると、メッセージが表示されます。しかし、メッセージ内の新しく作成された「マイ ボタン」ボタンをクリックすると、メッセージは表示されません。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    function appendText() {
      var button = $("<button>My Button</button>");
      $('p').append(button);
    }
    $(document).ready(function () {
        $("button").click(function () {
            alert($(this).attr("id"));

        });
    });
</script>
</head>
<body>

<p>This is a paragraph.<br></p>
<div>
   <button onclick="appendText()">HTML creat</button>
</div>
<script>
    var button = $("<button>JQuery creat</button>");
    $('div').append(button);
</script>

</body>
</html>
4

6 に答える 6

0

document.ready関数は、ドキュメントの準備ができた後に呼び出されます。

1-ドキュメントが完成すると、[マイボタン]ボタンがないため、イベントリスナーにバインドされることはありません。

やりたいことを行うには、ボタンを作成するときにリスナーをバインドする必要があります。次のようになります。

var button = $("<button>My Button</button>");
button.click(function () {
     alert($(this).attr("id"));
});
$('p').append(button);

2-クリックするjQueryリスナーに加えて、要素のonclickプロパティを上書きします。柔軟な方法でそれを回避し、両方を呼び出すには、これをクリックリスナーに追加します

eval($(this).attr("onclick"));

このjsFiddleをチェックして、それらが機能していることを確認できます。

于 2013-03-22T13:12:09.250 に答える
0

「JQuery Create」ボタンは、appendText() 関数を呼び出したことがないため、ボタンを追加しません。「My Button」ボタンからの直接呼び出しを削除し、appendText 呼び出しをクリック バインディング関数に追加しました。 .

このコードを試してください：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    function appendText() {
      var button = $("<button>My Button</button>");
      $('p').append(button);
    }
    $(document).ready(function () {
        $("button").click(function () {
            alert($(this).attr("id"));
            appendText();

        });
    });
</script>
</head>
<body>

<p>This is a paragraph.<br></p>
<div>
   <button>HTML create</button>
</div>
<script>
    var button = $("<button>JQuery create</button>");
    $('div').append(button);
</script>

</body>

于 2013-03-22T12:59:52.477 に答える
0

これが私の答えです：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
    function appendText() {
      var button = $("<button>My Button</button>");
      $('p').append(button);
    }
    $(document).ready(function () {
        $(document).on("click", "button", function () {
        alert($(this).attr("id"));    
 });
    });
</script>
</head>
<body>

<p>This is a paragraph.<br></p>
<div id="myDiv">
   <button onclick="appendText()">HTML creat</button>
</div>
<script>
    var button = $("<button onclick='appendText()'>JQuery creat</button>");
    $('#myDiv').append(button);

</script>

</body>
</html>

失礼なことを言わないでください、私はまだ学んでいます... localhost でテストされています。新しく生成されたボタンは、クリックするとアラートを発します。

サルドス ;)

于 2013-03-22T13:08:27.370 に答える
0

.click問題は、イベントをバインドする方法だと思います。.bindjQuery 1.7 より前は、.delegateとに対して別々のメソッドがあり.liveました。しかし、jQuery 1.7 の登場により、これらのメソッドはすべて 1 つのメソッドの下に含めることで単純化するためにマージされました.on。しかし、ドキュメントがあまり明確ではないため、人々はその.on方法を理解していません。.on上記の 3 つの非推奨メソッドの機能を提供しますが、メソッドの使用.on方法によって異なります。次に例を示します。

// Bind
$( "button" ).on( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "button", function( e ) {} );

// Delegate
$( "body" ).on( "click", "button", function( e ) {} );

私の推測では、動作していない のマークアップは、バインドbutton後に宣言されています。.clickその場合.on、ライブ イベントの as done を実装する必要があります。したがって、変更する必要があるのは、呼び出しをバインドする方法だけです。

$( document ).on( "click", "button", function () {
        //Do Something
});

お役に立てれば。

于 2013-03-22T13:15:46.987 に答える