jQuery click 函数与内联 onclick-6ren

jQuery click 函数与内联 onclick

转载作者：行者123 更新时间：2023-12-03 22:20:05

27

4

我正在尝试重新组织我的代码并使其更加不引人注目。

主要是有一个执行操作的链接。如果单击链接，操作将通过 ajax 执行(ajax 代码不在此处的代码中)，并且文本将被其他文本替换，为用户提供撤消操作的能力。如果用户单击“撤消”链接，ajax 会恢复之前的情况，并且提供用户执行再次显示的操作的文本。

我在一个 html 文件中制作了一个更简单的问题版本(代码如下)。有两段。如果单击第一段的链接(该链接使用内联 onclick 调用)，则代码将按预期工作。但是，如果单击第二段的链接，该链接使用 jQuery onclick 函数，则“撤消”链接不起作用，我不明白为什么。

有什么帮助吗？非常感谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(function() {      
            $(".add2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .add2").remove();
                $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
                return false;
            })
            $(".undoadd2").click(function(){
                var placeId = $(this).parents(".place").attr("id");
                $("#" + placeId + " .actions").find("span.added, a.add2").remove();
                $("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
                return false;
            })
        });

        function addPlace(placeId){
            $("#" + placeId + " .add").remove();
            $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>");
            return false;
        }

        function undoAddPlace(placeId){
            $("#" + placeId + " .actions").find("span.added, a.undoadd").remove();
            $("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
            return false;
        }
    </script>

</head>
<body id="home">
    <div class="place" id="3435910">
        <p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p>
    </div>

    <div class="place" id="3435912">
        <p class="actions"><a href="#" class="add2">Add place</a></p>
    </div>
</body>
</html>

最佳答案

Since you are dynamically adding new items to the DOM, you will have to register the click handler again on the new items.

您可以使用.live为此。

<小时/>

更新

自 jQuery 1.7 起，.on方法是执行此操作的首选方法。

自 jQuery 1.9 起 .live方法已被删除。

关于jQuery click 函数与内联 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/815856/

27

4

0

文章推荐： jQuery 数据表仅搜索一列

文章推荐： sql - 在 express 应用程序中续写原始查询

文章推荐： sql - sequelize.js $like 运算符中的 % 符号是什么意思？

文章推荐： jquery - 如何在jquery中选中/取消选中复选框时执行事件

jquery - .on ('click' ) 和 .off ('click' ).on ('click' ) 之间的区别
将 .off 与 .click 结合使用有何用途或区别？ $('#link').off('click').on('click',function(){}); 对比 $('#link').on('cli
javascript - JQuery/DOM元素 "click"事件注册: on ("click") VS click() VS addeventlistener ("click")
我正在学习 javascript，并且我见过不止一种注册点击事件的方法: $(DOMelement).click(function() {}); $(DOMelement).on('click',fu
jQuery .on ('click' ) 与 .click() 和 .delegate ('click' )
我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。文档 here似乎表明这是 .l
jquery - $(sel).bind ("click"、 $(sel).click(、 $(sel).live ("click"、 $(sel).on ("click"之间有什么显着差异？
我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的，但是，我只是想真正深入了解本质细节。我可能一直在创建有错误的代码，并且我不想在网络上贡献和传播懒惰完成的代码。所以，告诉我: What a
javascript - 有没有办法实现 "click"、 "double click"和 "click and hold"来处理同一元素？
我想实现类似在 Android 上点击 Instagram 中的帖子的功能(我认为在 iOS 上应该是相同的功能)。在 Instagram 中，如果有人点击照片，它会打开，双击，它会被喜欢，然后单击并
click - jquery click 事件只运行一次
我的点击事件有问题。它运行 1 次。示例: 我有 3 页(1 2 3)。当我点击 2 时它起作用了。然后在第 3 页，它又可以工作了。但我再次点击 2 不起作用。该事件未触发。 $("div .top
javascript - .off ('click' ) - 但我想再次返回 'click'
我正在尝试这样做。在 jsfiddle 中:http://jsfiddle.net/QGGhW/2/ 但是在我点击 not now 之后，下一个文本输入就不再可点击了。我该怎么做？是否有类似 .on
jquery .live ('click' ) 与 .click()
我想知道是否有任何情况下使用 .click(function {...}); 而不是 .live('click', function { ...});? 据我所知，实时选项似乎是一个更好的选择，因此我
javascript - .click() 在嵌套在 .click() 元素内部的元素上
我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为
jquery .on ("click")在 .off ("click")之后不起作用
我可以使用一些帮助来调试这个: var factBody = jQuery(".fact__body"); jQuery(".fact").on("click", function() { j
jQuery if click 包含 clicked 类
如果我有一个用于 clicked 类的监听器，以及另一个用于 click-option-1、click-option-2 类的监听器，以及click-option-3，如何在我的 clicked 事件
jquery - .on ('click' ) 与 .click() 之间的区别
下面的代码有什么区别吗？ $('#whatever').on('click', function() { /* your code here */ }); 和 $('#whatever').
jquery - .on ('click' ) VS 'selector.click
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
javascript - jQuery on(click)/click 事件未触发
我不擅长 UI 设计，所以我使用 bootstrap 和 jquery 来帮助我一点。我正在尝试将 jQuery 事件绑定(bind)到导航栏，因此当用户单击导航栏上的 p 标签时，它应该触发单击事件
jquery - click() 函数中的 click() 函数不起作用
问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？ HTML: Delete my
javascript - jQuery .click()/.on ("click"...) 我需要帮助在交替点击时交换文本
我想要完成的是“类似”的东西 $("button .toggleExcerpt) .toggle( function FIRST() { do first function..
javascript - click() 中的函数在设置元素的 click 方法后执行
function show1(){ $("#btn").click(show2()); window.alert(
javascript - .click/.on ('click' 内的 IF 语句不起作用
我不明白为什么这不起作用。当我单击具有该类名的复选框时，clickId 被赋予值access-toggle-all，所以这没有意义(至少对我来说).. $(document).ready(functi
javascript - 如何在触发另一个 click() 时清除 click()？
我有一个关于 click() 的复杂问题。我有 4 个按钮，分别命名为功能 1、功能 2、方法 1 和方法 2。 Function 1 Function 2 Method 1 Method 2 当单
javascript - this.click() 和 $(this).click() 有什么区别？
最后，我认为这不是我特别需要解决的问题，但我不明白为什么会这样，这让我很困扰。基本上，我有一些复选框，我只希望用户能够选择其中的一定数量。我正在使用下面的代码来实现该效果。 $j( function

首页

博学

6Ren·AI

商城

jQuery click 函数与内联 onclick