0

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

编辑在我匆忙弥补<p>没有其余内容的情况下，我输入了“name”而不是“id”。许多答案建议我切换到 ap[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 的其余部分正在工作。我没有尝试.on()在 HTML 的底部包含它，但我也在尝试避免在我的 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);

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

4

6 回答 6

1

工作演示 

<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

于 2012-09-04T06:02:34.913 回答
1

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

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

更好的是：

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

希望这对您有所帮助。

于 2012-09-04T06:30:35.310 回答
1

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

$('.deleter').click(function() {
        alert('click function works');
        var p="p"+$(this).attr("name");
        $('p[name='+p+']').remove();
});
于 2012-09-04T06:32:37.447 回答
0

对我来说它有效。虽然没有删除 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();
    });
});
于 2012-09-04T05:59:02.070 回答
0 
$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        //alert($(this).attr("name"));
        $("p[name=p" + $(this).attr("name") + "]").remove();
    });
});​
于 2012-09-04T06:08:11.203 回答
0

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

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

});

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

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

于 2012-09-05T20:33:11.937 回答