1

谁错了。我将创建两个按钮，一个是 html，另一个是 jQuery。当我单击“HTML creat”时，会显示消息并创建一个按钮。当我单击“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

2

您必须使用on()将事件附加到动态创建的元素中。您可以将事件委托给按钮或文档的最近父级。

$(document).ready(function () {
     $(document).on("click", "button", function () {
        alert($(this).attr("id"));    
     });
});

将事件委托给父 div，最好将 id 或 class 分配给父 div，并使用 id 或 class 选择器来委托事件。

$('div').ready(function () {
     $(document).on("click", "button", function () {
        alert($(this).attr("id"));    
     });
});
于 2013-03-22T12:53:44.487 回答
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 
$(document).ready(function () {
    $(document)on('click', 'button', function () {
        alert($(this).attr("id"));

    });
});

原始js（不考虑ie8）：

window.addEventListener('load', function(){
    document.addEventListener('click', function(e){
        if(e.target.tagName === 'button'){
              alert(e.target.id);
        }
    });
});
于 2013-03-22T12:55:02.003 回答
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>

不要这么粗鲁，我还在学习……在本地主机上测试过；单击时新生成的按钮会发出警报。

萨卢多斯 ;)

于 2013-03-22T13:08:27.370 回答
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

好吧，我认为问题在于您如何绑定.click事件。在 jQuery 1.7 之前，他们对.bind,.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 回答