Question

嗨，谢谢你的阅读。我一直在努力避免使用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)格式在文档准备好后设置click事件。这两种方式似乎都不起作用。此时，我使用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函数创建。

Answer 1

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

Answer 2

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

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

更好的是：

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

希望这会对你有所帮助。

Answer 3

我已修改你的javascript代码检查它。

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

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

Answer 5

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

Answer 6

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

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

});

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

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

jQuery .on点击事件不会发生

6 个答案: