jQuery.on-click事件不会发生

jQuery .on click event does not occur

本文关键字：on-click 事件 jQuery      更新时间：2023-09-26

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

edit 在匆忙制作一个没有其余内容的<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函数创建的

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

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

更好的是：

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

希望这对你有帮助。

我已经修改了您的javascript代码，请检查它。

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

工作演示

<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();
        });
    });​

编辑Jsfidle

对我来说，它很管用。但是没有删除段落元素，所以你的代码应该是这样的：

<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();
    });
});

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

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

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

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

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

相关文章：