how to bind click event of div

Question

hi i have a div

                <div id="profile_ops" style="display:none">
                    <button class="ybutton" id="viewclick" >View</button>&nbsp;
                    <button class="ybutton" id="editclick" >Edit</button>&nbsp;
                    <button class="ybutton" id="change_pswd" >Change Password</button>&nbsp;
                    <button class="ybutton"  id="change_pic" >Change Picture</button>&nbsp;
                </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 ?

i have tried giving the click event in edit click but it is giving me errro?

Answer 1

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.

Answer 2

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');
});

Answer 3

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()
  });

});

Answer 4

Add the code on a script tag.

This can be done in different ways, first lets say your script tag comes before the element:

<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 () {});

.live will 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.

Another way is using $(document).ready() ($(function(){}) is an alias). This function adds a function that will be executed when the page DOM loads.

$(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.

References

• live
• click
• ready

Answer 5

You should put view button outside the div

<button class="ybutton" id="viewclick" onclick="ShowHide();">View</button>&nbsp; 
<div id="profile_ops" style="display:none"> 
                           <button class="ybutton" id="editclick" >Edit</button>&nbsp; 
                    <button class="ybutton" id="change_pswd" >Change Password</button>&nbsp; 
                    <button class="ybutton"  id="change_pic" >Change Picture</button>&nbsp; 
                </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.