cari

Rumah  >  Soal Jawab  >  teks badan

javascript - 怎么在创建元素之前给他绑定事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script charset="utf-8">
        $(function () {
            $('.del').on('click' ,function () {
                $(this).parents('.ibox').remove();
            })
            var array = ["9", "2", "3", "4", "5"];
            $("#addnum").click(function () {
                for (i = 0; i < array.length; i++) {
                    add()
                    $(".num :eq(" + i + ")").val(array[i]);
                }
            })
            function add(){
                var tr = '<p class="ibox"> ' +
                        '<input type="text" class="num"  maxlength="3" value=""/>' +
                        '<input type="button" value="删除"  class="del"/>' +
                        '</p>';
                $('#inputfield').append(tr);
            }
        })
    </script>
</head>
<body>


<p>
    <button height="8" type="button" id="addnum">+</button>
</p>




<p id="inputfield">
</p>


</body>
</html>

"如上代码 尝试这创建了一批输入框 并使用on函数提前绑定元素 但是发现 如果把

$('.del').on('click' ,function () {
$(this).parents('.ibox').remove();
})
"
放到function add之内 添加元素del才有效果 放在add之外就不能附带效果,和文档里面说的“即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。”不一致求解惑

阿神阿神2819 hari yang lalu307

membalas semua(6)saya akan balas

  • 巴扎黑

    巴扎黑2017-04-10 15:27:11

    @浅黑色 是正解;
    除此之外,针对这种“创建元素之前想绑定事件”,还可以很简单地使用live绑定到document上:

    $('.del').live('click' ,function () {
        $(this).parents('.ibox').remove();
    })
    

    balas
    0
  • 天蓬老师

    天蓬老师2017-04-10 15:27:11

    $('#inputfield').on('click' ,'.del',function () {
    $(this).parents('.ibox').remove();
    })
    

    通过父元素来对其子元素绑定事件

    balas
    0
  • PHPz

    PHPz2017-04-10 15:27:11

    如果没猜错的话,把这段代码放在函数add之后是有效的。

    balas
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 15:27:11

    楼主你可以采用事件委托机制来实现

    balas
    0
  • PHP中文网

    PHP中文网2017-04-10 15:27:11

    如果楼主用1楼的办法,就需要加上防止事件冒泡的代码。

    //jquery code
    $("p").click(function(event){
         event.stopPropagation();
         // do something
    })
    

    balas
    0
  • 阿神

    阿神2017-04-10 15:27:11

    请看文档

    @浅黑色,正解。

    balas
    0
  • Batalbalas