原型扩展内的jQuery点击事件：现有代码及多元素使用诉求

Hey there! Let's walk through how to get your custom jQuery plugin working on those two elements, plus fix some potential issues in the original code that might cause unexpected behavior.

基本实现步骤 #

First, let's cover the core setup to apply your plugin to both .btn and .duh elements:

1. 完整HTML结构 #

Make sure you've got jQuery loaded, your plugin code, and a DOM-ready handler to initialize the plugin:

<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- Your custom plugin code -->
<script>
;(function($, document, window) { 
  'use strict'; 
  var defaults = { 
    el: '.na', 
  }; 
  $.fn.baboy = function( options ) { 
    var settings = $.extend( {}, defaults, options ); 
    this.each(function(){ 
      var dis = $(this); 
      $('body').on('click', dis, function(e) { 
        var text = dis.text(); 
        $( settings.el ).append('Click ' + text + '<br>' ); 
      }); 
    }); 
  }; 
})(jQuery, document, window);
</script>

<!-- Initialize the plugin -->
<script>
$(document).ready(function() {
  // Apply the plugin to both elements in one call
  $('.btn, .duh').baboy();
  
  // Alternatively, you can call it separately if needed:
  // $('.btn').baboy();
  // $('.duh').baboy();
});
</script>

<!-- Your target elements -->
<a href="#" class="btn">Button 1</a>
<p class="duh">Click me too!</p>

<!-- Container to display click logs (matches the default .na selector) -->
<div class="na"></div>

原插件的潜在问题及修复方案 #

Your original plugin has a couple of quirks that might cause unexpected behavior—let's fix them:

1. 事件委托参数错误 #

In your code, $('body').on('click', dis, ...) passes a jQuery object (dis) as the delegate target. jQuery expects a selector string here for event delegation to work correctly. For static elements (like your .btn and .duh), you don't need to delegate to body at all—bind the click directly to the element.

2. 闭包作用域导致的文本重复 #

The dis variable in your each loop is captured by the click callback via closure, which means all clicks might end up using the last element's text. Use $(this) inside the callback to reference the actual clicked element instead.

3. 缺少默认行为阻止（针对a标签） #

Clicking the <a> tag will trigger a page jump—add e.preventDefault() to stop that.

优化后的插件代码 #

Here's the revised plugin with all fixes applied, plus some quality-of-life improvements:

;(function($, document, window) { 
  'use strict'; 
  var defaults = { 
    outputEl: '.na', // Renamed for clarity
  }; 
  $.fn.baboy = function( options ) { 
    var settings = $.extend( {}, defaults, options ); 
    
    // Check if the output container exists first
    var $output = $(settings.outputEl);
    if (!$output.length) {
      console.warn('Output container not found: ' + settings.outputEl);
      return this; // Preserve jQuery chainability
    }

    this.each(function(){ 
      var $el = $(this); 
      $el.on('click', function(e) { 
        e.preventDefault(); // Stop a tag from jumping
        var text = $(this).text().trim(); // Clean up whitespace
        $output.append('Click ' + text + '<br>'); 
      }); 
    });

    return this; // Allow chaining like $('.btn').baboy().css('color', 'red')
  }; 
})(jQuery, document, window);

支持动态生成元素（可选） #

If your .btn or .duh elements are added to the page dynamically (after initial load), you'll need to use proper event delegation. Here's a modified version of the plugin that supports this:

;(function($, document, window) { 
  'use strict'; 
  var defaults = { 
    outputEl: '.na',
    delegateParent: 'body' // Default parent for delegation
  }; 
  $.fn.baboy = function( options ) { 
    var settings = $.extend( {}, defaults, options ); 
    var $output = $(settings.outputEl);
    
    if (!$output.length) {
      console.warn('Output container not found: ' + settings.outputEl);
      return this;
    }

    // Use the selector of the elements we're applying the plugin to
    var targetSelector = this.selector;
    $(settings.delegateParent).on('click', targetSelector, function(e) {
      e.preventDefault();
      var text = $(this).text().trim();
      $output.append('Click ' + text + '<br>');
    });

    return this;
  }; 
})(jQuery, document, window);

常见问题排查 #

• No text appears in the output container: Double-check that the outputEl selector matches an existing element on the page. The optimized plugin will log a warning to the console if it can't find the container.
• All clicks show the same text: This is the closure issue—make sure you're using $(this) inside the click callback instead of a variable from the outer loop.
• The a tag still jumps to the top: Ensure e.preventDefault() is included in the click handler to block the default anchor behavior.

内容的提问来源于stack exchange，提问作者SymmetricsWeb