如何添加按钮并对外部onclick功能做出反应? 我需要它也可用于生成的按钮和站点上的静态按钮。目前我有两次这个功能使它适用于这两种按钮,但这似乎有点多余。
button.on("click", function() {
banner.addClass("alt")
$("<br><button class='test'>TEST</button><br>").insertAfter(button);
//Here it works for the generated button:
$(".test").on("click", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
})
//Here it only works with the static buttons:
$(".test").on("click", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
答案 0 :(得分:1)
以下列方式将您的点击侦听器添加到父容器元素句柄。我选择文档作为父文件,你可以更具体。
$(document).on('click', '.test', function(){
banner.removeClass("alt")
banner.addClass("alt2")
})
答案 1 :(得分:0)
您需要搜索动态添加元素的静态祖先(父级)。并根据该父级绑定某些事件。
var banner = $("#banner-message")
var button = $("button")
button.on("click", function() {
banner.addClass("alt")
$("<br><button class='test'>TEST</button><br>").insertAfter(button);
//This one works:
//$(".test").on("click", function() {
//banner.removeClass("alt")
//banner.addClass("alt2")
//})
})
//This one doesn't work:
$("#banner-message").on("click",".test", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
&#13;
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt2 button {
background: #000;
color: #fff;
}
#banner-message.alt2 {
background: red;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
&#13;