如何在Jquery中删除和添加或绑定和取消绑定click事件

I want to enable and disable a click event for Jquery Dialog box, so if the user click "Link #1", the dialog box open once and on close it should disable the "Link #1", and the link should not open the Dialog Box unless the user clicks on "Link #2"

我想为Jquery对话框启用和禁用单击事件，因此如果用户单击“链接＃1”，对话框打开一次并关闭它应该禁用“链接＃1”，并且链接不应该打开对话框除非用户点击“Link＃2”

I tried jquery using .unbind() method, but it doesn't enable my button 1st link. it permanently disable the click event.

我使用.unbind（）方法尝试了jquery，但它没有启用我的按钮1st链接。它会永久禁用click事件。

Or is there any other method with "Jquery UI Dialog" which allows to not to open the Dialog Box?

或者是否有任何其他方法与“Jquery UI对话框”，它允许不打开对话框？

Here is my code:

这是我的代码：

HTML

HTML

    <span title="Accept" class="Accepted">Accept</span>
    <span title="Reject" class="Rejected">Reject</span>

JQUERY

JQUERY

    $(".Accepted").click(aceeptMethod);
        $(".Rejected").click(function () {
            $(this).closest('.rx-container').addClass('selected');
            $("#rejectReason").dialog("open");
        });

    $("#rejectReason").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                    rejectMethod();
                },
                    "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

       function aceeptMethod() {
            var $parent = $(this).closest('.rx-container');

            $(this).next().bind('click'); // BINDING BACK THE CLICK EVENT
            $('.rx-statusRejected', $parent).hide();
            $('.rx-statusAccepted', $parent).show();
            $('.rejectReasonBox', $parent).hide();
        }

        function rejectMethod() {
            $('.selected .rx-statusRejected').show();
            $(".selected .rx-statusAccepted").hide();
            $(".selected .rejectReasonBox").show();
            $('.selected .Rejected').unbind('click'); // UNBINDING THE CLICK EVENT
        }

Here is the Fiddle to show how my code is working: http://jsfiddle.net/aasthatuteja/W97wP/

以下是显示我的代码如何工作的小提琴：http：//jsfiddle.net/aasthatuteja/W97wP/

Please Suggest!

请建议！

2 个解决方案

#1

If you change your links to input elements then you can use the disabled property. If you want to unbind and then bind the click event back you will need to re-call all the code inside the new click event that you called in the original click event.

如果更改了输入元素的链接，则可以使用disabled属性。如果要取消绑定然后再绑定click事件，则需要重新调用在原始click事件中调用的新click事件中的所有代码。

Also your not targeting the rejected span with the following code. Your targeting the <br> tag.

您还没有使用以下代码定位被拒绝的跨度。您定位的是
标记。

$(this).next().bind('click');

You can try sibliings function like this.

你可以尝试像这样的sibliings功能。

$(this).siblings(".Rejected").bind('click');

Re-bind with the original code.

重新绑定原始代码。

  $(this).siblings(".Rejected").bind('click',function () {
      $(this).closest('.rx-container').addClass('selected');
      $("#rejectReason").dialog("open");
  });

#2

Rather than use unbind, I would suggest disabling whichever button you need.

我建议禁用你需要的任何按钮，而不是使用unbind。

For example, if after the use clicks Reject, if you don't want them being able to click reject a second time, use this code in your reject handler:

例如，如果在使用后单击“拒绝”，如果您不希望它们再次单击“拒绝”，请在拒绝处理程序中使用此代码：

$(".Rejected").prop('disabled', true);

If you want to re-enable this button if the user changes their mind and clicks on accepted, use this in your accept code:

如果您想在用户改变主意并点击接受时重新启用此按钮，请在接受代码中使用此按钮：

$(".Rejected").prop('disabled', false);

#1