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

Question

我想要发生什么

• 按下添加按钮时,将在添加按钮的行下方添加一行
• 按下删除按钮时,该行将被删除.
• 悬停或单击某个输入文本时,旁边会显示一个添加按钮.
  • 当鼠标没有悬停在输入文本上或未选择输入文本时,添加按钮应该消失.
• 将鼠标悬停在某个项目符号上时,会出现一个删除按钮来代替项目符号.
  • 当鼠标离开移除按钮时,它将恢复为子弹.

我怀疑我的一些问题正在发生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

Answer 1

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

通过事件委派:

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