Question

我正在尝试更改单击按钮时的类，以便在下次单击按钮时执行不同的操作。（我不想使用切换键）

更改班级后，下次单击这些按钮时，即使班级已更改也没有任何反应。有人可以帮我吗？我刚刚开始使用jQuery，所以我不了解很多高级机制。

 $(".showcontactbutton").click(function(){
    $("#contactform").show();
    //$(this).attr('class', 'hidecontactbutton');
    $(this).removeClass('showcontactbutton').addClass('hidecontactbutton');
    $(this).text("Hide Contact Form");
    //html("<button id='hidecontactbutton'>Hide Contact Form</button>");

});

$(".hidecontactbutton").click(function(){
    alert("Works:");
    $("#contactform").hide();
    //$(this).attr('id', 'showcontactbutton');
    $(this).removeClass('hidecontactbutton').addClass('showcontactbutton');
    $(this).text("Contact Us");
});

Answer 1

元素上的事件在加载时绑定，因此，当您更改绑定了元素的类时，事件将丢失。将绑定事件绑定到您不会更改的类，或者将事件绑定到文档一样。

$(document).on("click", ".showcontactbutton" , function() {
    ...
]);

有关更多信息，请搜索有关动态元素的绑定。

Answer 2

如果inline inline int f(void);没有<button>属性，则默认为type。如果说type='"submit"不在<button>中，这不是很明显，但是如果它在<form>中，则每次单击都会启动提交事件的默认行为：

收集所有嵌套在<form>中的[name]属性的表单控件的所有值。
将所有值发送到<form>属性所指示的服务器。
重置action

因此，将<form>添加到type="button"

<button>

关于切换<button id='hidecontactbutton' type="button">...</button>的状态，您应该以按钮的#id为目标，然后切换类。您是否打算将类放在按钮上而不是#contact？ #contact指的是单击的任何内容（在此情况下应为按钮）。

$(this)

$('#hideShow').on('click', hideShow);

function hideShow(e) {
  if ($(this).hasClass('hide')) {
    $(this).removeClass('hide').addClass('show').text('Hide Contact Form');
    $('#contact').show();
  } else {
    $(this).removeClass('show').addClass('hide').text('Contact Us');
    $('#contact').hide();
  }
};

button {
  display: inline-block;
  width: 18ch;
  cursor: pointer;
}

#contact {
  display: none;
  width: fit-content;
}

[type=submit] {
  float: right
}

更改按钮类后不会发生jQuery事件

2 个答案: