jQuery 如何绑定div的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3895998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to bind click event of div
提问by XMen
<div id="profile_ops" style="display:none">
<button class="ybutton" id="viewclick" >View</button>
<button class="ybutton" id="editclick" >Edit</button>
<button class="ybutton" id="change_pswd" >Change Password</button>
<button class="ybutton" id="change_pic" >Change Picture</button>
</div>
in this i show this div on particular condition and i hide the view button but on edit click i show the view button but i want to give click event of view button where should i give the click event of div ?
在此我在特定条件下显示此 div 并隐藏视图按钮但在编辑单击时我显示视图按钮但我想提供视图按钮的单击事件我应该在哪里提供 div 的单击事件？
i have tried giving the click event in edit click but it is giving me errro?
我试过在编辑点击中给出点击事件，但它给了我错误？
回答by balexandre
just assign the client event to each one
只需将客户端事件分配给每个人
$(document).ready( function() {
$("#viewclick").click( function() {
// this will fire when you click view
});
$("#editclick").click( function() {
// this will fire when you click edit
// hide the view button here and upon submit, show it again
// like $("#viewclick").hide() or $("#viewclick").fadeOut()
});
});
回答by AsifQadri
You should put view button outside the div
您应该将视图按钮放在 div 之外
<button class="ybutton" id="viewclick" onclick="ShowHide();">View</button>
<div id="profile_ops" style="display:none">
<button class="ybutton" id="editclick" >Edit</button>
<button class="ybutton" id="change_pswd" >Change Password</button>
<button class="ybutton" id="change_pic" >Change Picture</button>
</div>
when you click view button your div is show and view button is hide, And when you click on edit button view button again getting displayed.
当您单击视图按钮时，您的 div 显示，视图按钮隐藏，当您再次单击编辑按钮时，视图按钮显示。
回答by BrunoLM
Add the code on a scripttag.
在script标签上添加代码。
This can be done in different ways, first lets say your scripttag comes before the element:
这可以通过不同的方式完成，首先假设您的script标签位于元素之前：
<script></script>
<div></div>
So you have to bind the click event only after the element is rendered, you can do this using:
所以你必须在元素被渲染后绑定点击事件，你可以使用：
$("div").live("click", function () {});
.livewill add an eventhandler on the window and check for the click event, then it checks the target, if it matches the event is triggered. This way, any element added at anytime on the DOM will trigger this handler.
.live将在窗口上添加一个事件处理程序并检查单击事件，然后检查目标，如果匹配则触发事件。这样，在 DOM 上随时添加的任何元素都会触发此处理程序。
Another way is using $(document).ready()($(function(){})is an alias). This function adds a function that will be executed when the page DOM loads.
另一种方法是使用$(document).ready()($(function(){})是别名)。该函数添加了一个在页面 DOM 加载时执行的函数。
$(function() {
// when all elements have been loaded, add event on 'div'
$("div").click(function () { });
});
If your script comes after your element
如果您的脚本出现在您的元素之后
<div></div>
<script></script>
Then you can simply use $("div").click, unless the contents of the div are loaded dynamically.
然后你可以简单地使用$("div").click，除非 div 的内容是动态加载的。
References
参考
回答by Jsinh
you can bind the click event of view button from the start. Even if the event is binded. The user cannot fire the event if the button ins not seen / visible. so if the view is not visible the click event never fires. But when user clicks on edit the view will be visible and the event is already binded so will be able to click and the related click logic will fine.
您可以从一开始就绑定视图按钮的点击事件。即使事件被绑定。如果未看到/可见按钮，则用户无法触发该事件。因此，如果视图不可见，则单击事件永远不会触发。但是当用户单击编辑时，视图将可见并且事件已经绑定，因此将能够单击并且相关的单击逻辑将正常。
回答by Ivar
I didn't understand much of what you said, but to add a hide/show event you could do something like this:
我不太明白你说的话，但要添加隐藏/显示事件，你可以这样做：
$('#editclick').toggle(function() {
$('#viewclick').css('display', 'none');
}, function() {
$('#viewclick').css('display', 'inline');
});
回答by Mthokozisi
You can try this
你可以试试这个
$('#element).on( 'click',
function(e){
this.change();
});
回答by Prashant Sankpal
function ShowHide() {
$("#profile_ops").show();
$("#viewclick").hide();
}
$(document).ready(function(){
$("#editclick").click(function(){
$("#viewclick").show();
});
})
<button class="ybutton" id="viewclick" onclick="ShowHide();">View</button>
<div id="profile_ops" style="display:none">
<button class="ybutton" id="editclick" >Edit</button>
<button class="ybutton" id="change_pswd" >Change Password</button>
<button class="ybutton" id="change_pic" >Change Picture</button>
</div>
