Question

<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>

在此我显示特定条件下的div，我隐藏视图按钮但在编辑单击我显示视图按钮但我想给点击事件视图按钮我应该在哪里给出div的点击事件？

我试过在编辑点击中给出点击事件，但是它给了我errro？

Answer 1

只需将客户事件分配给每个

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

您应该将视图按钮放在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>

当您单击视图按钮时，您的div显示并且视图按钮被隐藏，当您再次单击编辑按钮视图按钮时，将显示。

Answer 3

在script代码上添加代码。

这可以通过不同的方式完成，首先让我们说script标记位于元素之前：

<script></script>
<div></div>

因此，您必须在呈现元素后绑定click事件，您可以使用以下方法执行此操作：

$("div").live("click", function () {});

.live将在窗口上添加一个事件处理程序并检查click事件，然后检查目标，如果匹配事件被触发。这样，DOM上随时添加的任何元素都将触发此处理程序。

另一种方法是使用$(document).ready()（$(function(){})是别名）。此函数添加了一个在页面DOM加载时执行的函数。

$(function() {
    // when all elements have been loaded, add event on 'div'
    $("div").click(function () { });
});

如果您的脚本位于元素之后

<div></div>
<script></script>

然后你可以简单地使用$("div").click，除非动态加载div的内容。

<强>参考

Answer 4

您可以从一开始就绑定查看按钮的click事件。即使事件是绑定的。如果没有看到/可见按钮，则用户无法触发事件。因此，如果视图不可见，则click事件永远不会触发。但是当用户点击编辑时，视图将会显示，并且事件已经绑定，因此可以单击，相关的点击逻辑也可以。

Answer 5

我对你所说的内容并不了解，但是为了添加一个隐藏/展示活动，你可以这样做：

$('#editclick').toggle(function() {
  $('#viewclick').css('display', 'none');
}, function() {
  $('#viewclick').css('display', 'inline');
});

Answer 6

你可以试试这个

$('#element).on( 'click',
   function(e){ 
      this.change(); 
  });

Answer 7

function ShowHide() {
    $("#profile_ops").show();
    $("#viewclick").hide();   
}

$(document).ready(function(){
    $("#editclick").click(function(){
        $("#viewclick").show();

    });

})


    <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>

如何绑定div的click事件

7 个答案: