jQuery對新添加的控件添加響應事件

本文轉載自查看原文 2015-06-10 15:06 8138 JavaScript/Html

1. 通過id和類控制

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
        $("#button1").click(function(){
            var val = "<div class='mi'>nihao</div>";
            jQuery("#h").append(val);
            $(".mi").click(function(){
                $(this).hide();
            });
        });
});

$(document).ready(function(){
        $("#mi").click(function(){
            $(this).hide();
        });
});
</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>

效果

初始化

點擊一次

點擊三次

點擊一次“你好”

2. 通過數組中的值作為id

2.1 錯誤思路

<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div id=" + val[i] + ">nihao</div>";
                jQuery("#h").append(tmp);
            }
        });
});

for (var i = 0; i < val.length; ++i)
{
    $(document).ready(function(){
        $("#" + val[i]).click(function(){
            {
                $(this).hide();
            }
        });
    });
}

</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>

問題在於，一開始並沒有id為val列表中的控件，此時初始化事件不行的。

2.2 改正1——集中處理

<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div id=" + val[i] + ">nihao</div>";
                jQuery("#h").append(tmp);
            }

            for (var i = 0; i < val.length; ++i)
            {
                $(document).ready(function(){
                    $("#" + val[i]).click(function(){
                        {
                            $(this).hide();
                        }
                    });
                });
            }
        });
});


</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>

注：點擊一次“hihi”，原因是原來id的控件只是隱藏了，再添加就會有重復的id了。

2.3 改正2——單獨處理

<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div id=" + val[i] + ">nihao</div>";
                jQuery("#h").append(tmp);
                $("#" + val[i]).click(function(){
                    $(this).hide();
                });
            }
        });
});


</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>

深入了解jQuery，有疑問

<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"]

$(document).ready(function(){
        $("#button1").click(function(){
            for (var i = 0; i < val.length; ++i)
            {
                var tmp = "<div class='divclass' id=" + val[i] + ">nihao:" + val[i] + "</div>";
                jQuery("#h").append(tmp);
                /*
                $("#" + val[i]).click(function(){
                    alert(":" + i);
                    $(this).hide();
                });
                */
            }
            $(".divclass").on("click", function(){
                    $(".divclass").hide();
            })
        });
});


</script>
</head>

<body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery 給Js動態新添加的元素綁定的點擊事件關於jQuery出現的新添加元素點擊事件無效 jQuery 新添加元素事件綁定無效 jquery on() bind()綁定的點擊事件在js動態新添加的元素生效 QAction添加事件響應 jquery 獲取新添加元素點擊后的子元素 jQuery 之動態添加事件（on）在django后台添加自己的響應事件 VC++單文檔分割窗口、在視圖中添加控件，並響應該控件的事件給控件添加單擊事件－－UITapGestureRecognizer