javascript – 单击按钮后jQuery函数无法正常工作？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 单击按钮后jQuery函数无法正常工作？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2722字，纯文字阅读大概需要4分钟。

内容图文

参见英文答案 > Event binding on dynamically created elements?                                    23个
我想要发生什么

>按下添加按钮时,将在添加按钮的行下方添加一行
>按下删除按钮时,该行将被删除.
>当悬停或单击某个输入文本时,旁边会显示一个添加按钮.

>当鼠标没有悬停在输入文本上或未选择输入文本时,添加按钮应该消失.

>将鼠标悬停在某个项目符号上时,会出现一个删除按钮代替项目符号.

>当鼠标离开移除按钮时,它将恢复为子弹.

我怀疑我的一些问题正在发生b / c我将所有功能都放在$(document).ready()中.如果有人可以输入我应该使用的jQuery代码,我将非常感激！

怎么了

添加按钮

只有第一个添加按钮有效.

删除按钮

其他添加的行删除按钮仅在将鼠标悬停在第一个项目符号上时显示.

删除按钮仅适用一次.删除一行后,删除按钮&添加按钮失去了功能.删除和添加按钮也不会消失.

我的代码

HMTL

这是我要添加的行

<div class="row">
                <div class="col-lg-7">
                    <div class="form-group">
                        <div class="input-group input-group-lg">
                            <div class="input-group-btn"> 
                                <button type="button" class="btn btn-default button-remove" aria-label="Remove">
                                    <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-default button-bullet" aria-label="Bullet">
                                    <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span>
                                </button>
                            </div> 
                            <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"> 
                            <div class="input-group-btn">  
                                <button type="button" class="btn btn-default button-add" aria-label="Add">
                                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                </button> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>

jQuery的

这些是我用来设置按钮动画和添加/删除行的功能.

$(document).ready(function(){
    $("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function()      {
        $(".button-add").fadeToggle(300);
    })
    $(".button-bullet").closest('.input-group-btn').hover(function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })

    $(".button-add").click(function(){
        var $row = $(this).closest('.row');
        var $wsProbRow = $row.clone();
        $wsProbRow.insertAfter($row);
        console.log("Add-Button pressed");
    })
    $(".button-remove").click(function(){
        $(this).closest('.row').remove();
        console.log("Remove-Button pressed");
    })
})

JSFiddle

解决方法:

使用动态元素时,您需要使用event delegation或将单击处理程序绑定到新创建的元素.

通过事件委派：

$(document).on("click", ".button-add", function(){
  var $row = $(this).closest('.row');
  var $wsProbRow = $row.clone();
  $wsProbRow.insertAfter($row);
  console.log("Add-Button pressed");
})

创建后绑定：

function onClick = function(){
  var $row = $(this).closest('.row');
  var $wsProbRow = $row.clone();
  $wsProbRow.find(".button-add").on("click", onClick);
  $wsProbRow.insertAfter($row);
  console.log("Add-Button pressed");
})

$(".button-add").on("click", onClick);

内容总结

以上是互联网集市为您收集整理的javascript – 单击按钮后jQuery函数无法正常工作？全部内容，希望文章能够帮你解决javascript – 单击按钮后jQuery函数无法正常工作？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端