jQuery .on 点击事件不会发生答案

【问题标题】：jQuery .on click event does not occurjQuery .on 点击事件不会发生
【发布时间】：2012-09-04 05:53:22
【问题描述】：

您好，感谢您的阅读。我一直在尝试避免使用 HTML onclick="__" 引用，而是将这些事件放在我的 .js 文件中。在阅读了 jQuery 的 .click() 和 .on() 事件之后，我尝试在我的代码中使用它作为按钮。

编辑在我匆忙编造一个没有其余内容的<p> 时，我输入了“name”而不是“id”。许多答案建议我切换到p[name=p+ 或#p+ 引用，但我的主要问题是我什至无法在引用id/name 之前点击警报。再次感谢您的回答。

HTML：

<p name="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

JS：

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("p" + $(this).attr("name")).remove();
    });
});

当我单击按钮时，上面的代码甚至不会发出警报。我也尝试过按名称和 ID 引用按钮，然后按 $(document).ready($('.deleter')___。

我也尝试使用$(handler) 格式在文档准备好后设置点击事件。两种方法似乎都行不通。此时，我求助于onclick="deleteButton()" 并在我的.js 文件中有一个deleteButton() 函数，但该函数不会检测到$(this)，只是删除了所有<p> 标签。

我的 javascript 的其余部分正在运行。我没有尝试在 HTML 的底部包含这个 .on()，但我也在尝试避免在我的 HTML 中使用脚本。为了完整起见，我一直在 Chrome 和 Firefox 上进行测试，使用 .jsp 文件来呈现 HTML。

再次感谢。

编辑

这是我引用我的 jquery 和 js 的方式，直接复制粘贴。

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
</head>

这是我的 html 看起来如何导致

所在的 div

已插入：

<body>
    <div id="wrapper">
        <div id="header">Card Draw Probability Calculator</div>
        <div id="main">
            <div id="cardList">
                <fieldset>
                    <legend> Select cards for probability calculation</legend>

                        <div id="innerCardList"></div>

<p> 的生成方式如下：

function newestCardListLineMaker() {
    var $newLine = $('<p id="newestPara"><input type="checkbox" name="new" value="none"/> <input class="cardText" type="text" maxlength="30" name="newestCard" /> Quantity <input type="text" maxlength="1" class="quantityText" name="newestQuant" /><button class="deleter" id="newestDelete">Delete</button><br/></p>');

    $("#innerCardList").append($newLine);

另外一点，我之前应该看到它很重要：.click 或 .on(click, handler) 引用的 HTML 是由另一个 js 函数创建的。

【问题讨论】：

查看您的演示 jsfiddle.net/api/post/jquery/1.5.2
您的代码似乎可以在独立检查 jsfiddle.net/ka5zU 上运行
您是否在 HTML 文档中包含了对 jQuery 的引用？此外，您的 script.js 文件是否在此参考之下？
删除它可以是：$("p[name=p" + $(this).attr("name")+"]").remove();
我可以在您的 HTML 页面中显示包含 js 文件的代码吗？

标签： javascript onclick jquery jquery-on

【解决方案1】：

尝试使用 .on() 函数，这样您的代码将是：

$(document).ready({
  $('.deleter').on('click', function(){
     //do stuff here
  });
});

更好的是：

$(document).ready({
   $('div_above_.deleter').on('click', '.deleter', function(){
     // do stuff here
   });
});

希望对你有所帮助。

【讨论】：

这个答案最接近帮助我找出答案。我需要委派这些操作，因为
s 是由 js 创建的。谢谢。

【解决方案2】：

我已经修改了你的javascript代码检查一下。

$('.deleter').click(function() {
        alert('click function works');
        var p="p"+$(this).attr("name");
        $('p[name='+p+']').remove();
});

【讨论】：

【解决方案3】：

working demo

<p id="pBananas"> junk </p> 
    <button class="deleter" id="dBananas" name="Bananas">Delete</button>

    $(document).ready(function() {
        $('.deleter').click(function() {
            alert('click function works');
            $("#p" + $(this).attr("name")).hide();
        });
    });

已编辑Jsfiddle

【讨论】：

你好诗巫。为什么要隐藏而不是删除？
另外...我尝试使用#p，但它仍然不会显示警报或隐藏
@jasonlee remove() 将从 DOM 中完全删除匹配的元素，因此如果您稍后需要显示它，则不能。你检查了 jsfiddle 链接..它的工作原理
我检查了链接。它可以在 jsfiddle 链接中使用，但 .click 将无法在我的页面上的任何元素上使用，因为我现在已经对其进行了测试。
@jasonlee 我已将我的答案编辑为您的新要求。虽然您的问题不清楚，但如果您需要其他帮助，请告诉我

【解决方案4】：

对我来说它有效。虽然没有删除 Paragraph 元素，但您的代码应该如下所示：

<p id="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

和

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("#p" + $(this).attr("name")).remove();
    });
});

【讨论】：

我知道我可能错误地引用了段落元素，但为什么不显示警报？
抱歉不清楚 - 只有警报显示（它确实显示给我，奇怪的是），只是在你的代码中，段落元素没有被删除，但是当我测试你的确切时警报确实显示你给它的代码。
不幸的是，我的问题是我什至无法收到警报。我在上面进行了编辑，注意在页面加载后如何制作包含
的 HTML。会不会是这个问题？

【解决方案5】：

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        //alert($(this).attr("name"));
        $("p[name=p" + $(this).attr("name") + "]").remove();
    });
});

【讨论】：

【解决方案6】：

我用来完成.on('click')事件的最终代码是：

$(document).ready(function() {
    $("div#innerCardList").on("click", "button.deleter", function() {
        var paraName = $(this).closest("p").attr("id");
        $("#" + paraName).remove();
    });

});

我想要分配点击事件的 HTML 元素是在页面加载后生成的。我需要将事件委托给包含的 div。

感谢所有帮助和不同的观点！

【讨论】：