Jquery livequery“点击”不起作用

Posted 2023-05-08

【中文标题】Jquery livequery“点击”不起作用

【英文标题】：Jquery livequery 'click' doesn't work

【发布时间】：2016-05-22 07:10:24

【问题描述】：

我的 Jquery 有问题，没有弹出警报。

代码如下：

html（我有这个 div 4 次，这是一个按钮）：

<div class="grid4 text_center" style = "margin: 20px 20px 0px 0px;">
<input value="Calculer" class="bouton btvalid btlong250 validation" type="submit">
</div>

JS：

$(document).ready(function()
$('.grid4 text_center .bouton btvalid btlong250 validation').livequery('click', function ()     
var sTest = 'Click';
alert('' + sTest);  
);
); 

【问题讨论】：

你为什么用livequery插件？？？

我在***.com/questions/7675526/is-livequery-deprecated 读到“livequery 已死”。为什么会死？

【参考方案1】：

将您的选择器更改为：

$('.grid4.text_center .bouton.btvalid.btlong250.validation')

空格分隔的 css 类名应与 . 连接，因此对于 div，您可以使用 .grid4.text_center 然后空格 现在与输入的 css 类 .bouton.btvalid.btlong250.validation 相同。

---

也许你应该这样做：

$(document).ready(function() 
  $('.grid4.text_center .bouton.btvalid.btlong250.validation').livequery(function() 
    $(this).click(function() 
      var sTest = 'Click';
      alert('' + sTest);
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="grid4 text_center" style="margin: 20px 20px 0px 0px;">
  <input value="Calculer" class="bouton btvalid btlong250 validation" type="submit">
</div>

<script>
  (function(factory) 
    if (typeof define === 'function' && define.amd) 
      define(['jquery'], factory);
     else if (typeof exports === 'object') 
      factory(require('jquery'));
     else 
      factory(jQuery);
    
  (function($, undefined) 

    function _match(me, query, fn, fn2) 
      return me.selector == query.selector &&
        me.context == query.context &&
        (!fn || fn.$lqguid == query.fn.$lqguid) &&
        (!fn2 || fn2.$lqguid == query.fn2.$lqguid);
    

    $.extend($.fn, 
      livequery: function(fn, fn2) 
        var me = this,
          q;

        // See if Live Query already exists
        $.each($jQlq.queries, function(i, query) 
          if (_match(me, query, fn, fn2))
          // Found the query, exit the each loop
            return (q = query) && false;
        );

        // Create new Live Query if it wasn't found
        q = q || new $jQlq(me.selector, me.context, fn, fn2);

        // Make sure it is running
        q.stopped = false;

        // Run it immediately for the first time
        q.run();

        // Contnue the chain
        return me;
      ,

      expire: function(fn, fn2) 
        var me = this;

        // Find the Live Query based on arguments and stop it
        $.each($jQlq.queries, function(i, query) 
          if (_match(me, query, fn, fn2) && !me.stopped)
            $jQlq.stop(query.id);
        );

        // Continue the chain
        return me;
      
    );

    var $jQlq = $.livequery = function(selector, context, fn, fn2) 
      var me = this;

      me.selector = selector;
      me.context = context;
      me.fn = fn;
      me.fn2 = fn2;
      me.elements = $([]);
      me.stopped = false;

      // The id is the index of the Live Query in $.livequery.queries
      me.id = $jQlq.queries.push(me) - 1;

      // Mark the functions for matching later on
      fn.$lqguid = fn.$lqguid || $jQlq.guid++;
      if (fn2) fn2.$lqguid = fn2.$lqguid || $jQlq.guid++;

      // Return the Live Query
      return me;
    ;

    $jQlq.prototype = 
      stop: function() 
        var me = this;
        // Short-circuit if stopped
        if (me.stopped) return;

        if (me.fn2)
        // Call the second function for all matched elements
          me.elements.each(me.fn2);

        // Clear out matched elements
        me.elements = $([]);

        // Stop the Live Query from running until restarted
        me.stopped = true;
      ,

      run: function() 
        var me = this;
        // Short-circuit if stopped
        if (me.stopped) return;

        var oEls = me.elements,
          els = $(me.selector, me.context),
          newEls = els.not(oEls),
          delEls = oEls.not(els);

        // Set elements to the latest set of matched elements
        me.elements = els;

        // Call the first function for newly matched elements
        newEls.each(me.fn);

        // Call the second function for elements no longer matched
        if (me.fn2)
          delEls.each(me.fn2);
      
    ;

    $.extend($jQlq, 
      guid: 0,
      queries: [],
      queue: [],
      running: false,
      timeout: null,
      registered: [],

      checkQueue: function() 
        if ($jQlq.running && $jQlq.queue.length) 
          var length = $jQlq.queue.length;
          // Run each Live Query currently in the queue
          while (length--)
            $jQlq.queries[$jQlq.queue.shift()].run();
        
      ,

      pause: function() 
        // Don't run anymore Live Queries until restarted
        $jQlq.running = false;
      ,

      play: function() 
        // Restart Live Queries
        $jQlq.running = true;
        // Request a run of the Live Queries
        $jQlq.run();
      ,

      registerPlugin: function() 
        $.each(arguments, function(i, n) 
          // Short-circuit if the method doesn't exist
          if (!$.fn[n] || $.inArray(n, $jQlq.registered) > 0) return;

          // Save a reference to the original method
          var old = $.fn[n];

          // Create a new method
          $.fn[n] = function() 
            // Call the original method
            var r = old.apply(this, arguments);

            // Request a run of the Live Queries
            $jQlq.run();

            // Return the original methods result
            return r;
          ;

          $jQlq.registered.push(n);
        );
      ,

      run: function(id) 
        if (id !== undefined) 
          // Put the particular Live Query in the queue if it doesn't already exist
          if ($.inArray(id, $jQlq.queue) < 0)
            $jQlq.queue.push(id);
         else
        // Put each Live Query in the queue if it doesn't already exist
          $.each($jQlq.queries, function(id) 
          if ($.inArray(id, $jQlq.queue) < 0)
            $jQlq.queue.push(id);
        );

        // Clear timeout if it already exists
        if ($jQlq.timeout) clearTimeout($jQlq.timeout);
        // Create a timeout to check the queue and actually run the Live Queries
        $jQlq.timeout = setTimeout($jQlq.checkQueue, 20);
      ,

      stop: function(id) 
        if (id !== undefined)
        // Stop are particular Live Query
          $jQlq.queries[id].stop();
        else
        // Stop all Live Queries
          $.each($jQlq.queries, $jQlq.prototype.stop);
      
    );

    // Register core DOM manipulation methods
    $jQlq.registerPlugin('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');

    // Run Live Queries when the Document is ready
    $(function() 
      $jQlq.play();
    );

  ));
</script>

【讨论】：

感谢您的回答，但我仍然没有弹出警报。

好吧，看来我的错误是之前犯的，我试图将变量和警报放入准备好的文档中而不使用livequery，它仍然不起作用，是否意味着我的脚本src不工作？

@JulienS 为您添加了一个 sn-p，如果您从 github 引用该库，那么它可能会输出一些错误，请参阅 Web 控制台或在本地下载它，然后您可以在 jQuery 之后添加 livequery。

它现在正在工作，我必须进行一些搜索才能了解我猜的一切是如何工作的。谢谢。

【参考方案2】：

将您的选择器更改为此。

$('.grid4 .validation');