Question

我是jQuery插件的新手。

问题：如果我想要严格调用我的插件，也会调用之前实例中的controls-event-listeners（如按钮）。

就我而言，我只有一个按钮（在下面的示例中称为btnDone），必须用于所有实例。

我如何在下面的代码中确保只调用正确的实例事件。

HTML：

<ol>
    <li>Click button 1.</li>
    <li>Click done</li>
    <li>Click button 2</li>
    <li>Click done - here I want only event for '2' to show, but event for '1' is called too ... how do I fix this?</li>
</ol>

<button id='btn1'>1</button>
<button id='btn2'>2</button>

<button id='btnDone' style='display:none'>Done</button>

<div id='divConsol'></div>

脚本：

(function ($) {
    'use strict';

    $.findCustomerDialog = function (options) {

        var defaultOptions = {          
            title: '',
        };

        var opts = $.extend({}, defaultOptions, options);
        $("#btnDone").show();
        $("#btnDone").click(function() {  
            $("#divConsol").append("<div>" + opts.title + "</div>");
            $("#btnDone").hide();
        });

    };

})(jQuery)


$(document).ready(function ($) {

    $("#btn1").click(function (e) { 
        $("#divConsol").append("<div>-----------------------</div>");
        $.findCustomerDialog({
            title: '1',
        });
    });

    $("#btn2").click(function (e) { 
        $("#divConsol").append("<div>-----------------------</div>");
        $.findCustomerDialog({
            title: '2',
        });
    });

});

Answer 1

好的抓住！提供.off("click")以清除先前的事件绑定，然后再次使用该绑定。这将解决：

$("#btnDone").off("click").click(function() {  
    $("#divConsol").append("<div>" + opts.title + "</div>");
    $("#btnDone").hide();
});

您已经有.click()的处理程序，它被调用两次。删除旧的。

<强>段：

(function ($) {
  'use strict';
  $.findCustomerDialog = function (options) {
    var defaultOptions = {			
      title: '',
    };
    var opts = $.extend({}, defaultOptions, options);
    $("#btnDone").show();
    $("#btnDone").off("click").click(function() {  
      $("#divConsol").append("<div>" + opts.title + "</div>");
      $("#btnDone").hide();
    });
  };
})(jQuery)

$(document).ready(function ($) {
  $("#btn1").click(function (e) { 
    $("#divConsol").append("<div>-----------------------</div>");
    $.findCustomerDialog({
      title: '1',
    });
  });
  $("#btn2").click(function (e) { 
    $("#divConsol").append("<div>-----------------------</div>");
    $.findCustomerDialog({
      title: '2',
    });
  });
});

* {font-family: Segoe UI;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ol>
  <li>Click button 1.</li>
  <li>Click done</li>
  <li>Click button 2</li>
  <li>Click done - here I want only event for '2' to show, but event for '1' is called too ... how do I fix this?</li>
</ol>

<button id='btn1'>1</button>
<button id='btn2'>2</button>

<button id='btnDone' style='display:none'>Done</button>

<div id='divConsol'></div>

小提琴：http://jsfiddle.net/praveenscience/qhj66L5y/2/

Answer 2

NextButtonClick不是一个可靠的解决方案。您需要将一个元素或一个选择器传递给插件，以便它知道要挂钩的元素，因此它也可以使用选择器，即：off：

http://jsfiddle.net/qhj66L5y/3/

将id传递给函数，也可以使用选择器，这只是一个示例，而不是一个完整的工作演示：

传递一些指示符来告诉插件使用哪个元素，1只是一个示例，但它可以是jQuery选择器或元素本身，即：

findCustomerDialog($(".someClass"))

或

$.findCustomerDialog($("#btn1"), {
        title: '1',
});

或简单样本：

$.findCustomerDialog($(".btns"), {
        title: '1',
});

插件知道绑定事件的元素：

$.findCustomerDialog(1, {
        title: '1',
});

html，如果这些按钮是由插件创建的，可能会更好：

$("#btnDone" + id).show();
    $("#btnDone" + id).click(function() {  
        $("#divConsol").append("<div>" + opts.title + "</div>");
        $("#btnDone" + id).hide();
});

如何在jQuery插件中控制事件（如按钮）？

2 个答案: