单击:function()不会覆盖

时间:2017-07-06 01:26:05

标签: jquery html onclick event-handling popup

每次点击活动都有两个按钮。问题是当我单击button1时,button1事件中的警报消息正在显示。但是当我点击button1之后的button2时,button1中的警告仍然显示,反之亦然,如果我先点击button2然后按钮1,则按钮2中的警报显示。除了click()和return()之外的标题,内容和其他工作正常。谢谢你的帮助

编辑:我认为这个问题与函数底部的unset()有关。我尝试了不同的设置,例如settings.click = undefined / null,并且上一个按钮的警报不再显示,但之后,不再显示任何警报。

$(document).ready(function() {
  $('#button1').click(function() {
    popup_box({
      title: "Message 1",
      content: "Message 1"
    }, {
      submit: "Edit",
      click: function() {
        alert("Message 1");
      }
    });
  });
  $('#button2').click(function() {
    popup_box({
      title: "Message 2",
      content: "Message 2"
    }, {
      submit: "Edit",
      click: function() {
        alert("Message 2");
      }
    });
  });

  function popup_box(options, settings) {
    var options_defaults = {
      title: "Popup title",
      content: "Popup content",
      footer: false
    }
    var settings_defaults = {
      id: false,
      submit: false,
      cancel: false,
      width: false,
      click: false,
      return: false,
      headerColor: "darkgreen"
    }
    var options = $.extend(options_defaults, options);
    var settings = $.extend(settings_defaults, settings);
    var popup_container = $('#popupBox');
    var popup_header = popup_container.find('.modal-header');
    var popup_title = popup_container.find('#popupTitle');
    var popup_content = popup_container.find('#popupContent');
    var popup_footer = popup_container.find('#popupFooter');
    var popup_submit = popup_container.find('.btn-primary');
    var popup_cancel = popup_container.find('.btn-secondary');
    popup_header.css("background-color", settings.headerColor);
    popup_title.html(options.title);
    popup_content.html(options.content);
    if (settings.footer != false) popup_footer.html(options.footer);
    if (settings.submit != false) popup_submit.html(settings.submit);
    else popup_submit.html("Submit");
    if (settings.cancel != false) popup_cancel.html(settings.cancel).removeClass("hidden");
    else popup_cancel.addClass("hidden");
    if (settings.width != false) popup_container.find('.modal-dialog').css("max-width", settings.width);
    else popup_container.find('.modal-dialog').css("max-width", '');
    popup_container.modal('show');
    popup_submit.click(function() {
      if (typeof settings.click == 'function') settings.click();
      if (settings.id != false) settings.id.submit();
      popup_container.modal('hide');
    });
    popup_container.on('hidden.bs.modal', function() {
      if (typeof settings.return == 'function') settings.return();
      popup_title.empty();
      popup_content.empty();
      popup_footer.empty();
      unset(settings.id);
      unset(settings.submit);
      unset(settings.cancel);
      unset(settings.width);
      unset(settings.click);
      unset(settings.return);
      unset(settings.headerColor);
      unset(options);
      unset(settings);
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="button1" class="btn btn-default">Button 1</button>
<button type="submit" id="button2" class="btn btn-default">Button 2</button>

<div class="modal" id="popupBox" tabindex="-1" role="dialog" aria-labelledby="popupTitle" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"">
					<span class="glyphicon glyphicon-remove c-white" aria-hidden="true"></span>
				</button>
				<h5 class="modal-title" id="popupTitle">Popup Title</h5>
			</div>
			<div class="modal-body" id="popupContent">
				Popup content
			</div>
			<div class="modal-footer">
				<div class="pull-left" id="popupFooter">Popup footer</div>
				<button type="button" class="btn btn-primary">Submit</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>

0 个答案:

没有答案