Question

我想要发生什么

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

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

发生了什么

添加按钮

只有第一个添加按钮才有效。

删除按钮 其他添加的行＆＃39;只有当鼠标悬停在第一个项目符号上时，才会显示删除按钮。

删除按钮仅适用一次。删除一行后，删除按钮＆amp;添加按钮失去了功能。删除和添加按钮也不会消失。

我的代码

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

使用动态元素时，您需要使用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);

Answer 2

从文件中进行事件委托

   $(document).on('hover', 'row',function()    {
        $(".button-add").fadeToggle(300);
    })
    $(document).on('hover','.input-group-btn',function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })

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

Answer 3

不要将您的点击绑定到这样的类，因为您需要动态添加内容，并且由于某些愚蠢的原因，所有浏览器都不会将点击绑定到页面加载后注入的html。

所以，请这样做：

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

Answer 4

你应该克隆DOM，包括数据和事件，即：

var $wsProbRow = $row.clone(true);

见这里：https://jsfiddle.net/r6aw21fj/

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

我想要发生什么

发生了什么

我的代码

4 个答案: