jjzjj

javascript - jQuery 事件委托(delegate)不适用于 jQuery UI 日期选择器

coder 2025-01-05 原文

我试图阻止特定的点击事件冒泡到文档根目录，结果关闭了我的一个弹出窗口。我需要停止冒泡事件，body 或 html 是我拦截和停止它的唯一选择。

日期选择器弹出窗口是动态生成的，所以我不能在 .ui-icon 元素上使用直接事件，所以我在 body 上注册了一个委托(delegate)事件阻止它冒泡的元素。

(function ($) {
    $(function () {
        $('body').on('click', '.ui-icon', function (e) {
            e.stopPropagation();
        });
    });
})(jQuery);

令人惊讶的是，将直接事件注册到 body 元素并检查事件的目标工作得很好。

(function ($) {
    $(function () {
        $('body').on('click', function (e) {
            if ($(e.target).is('.ui-icon')) {
                e.stopPropagation();
            }
        });
    });
})(jQuery);

我真的很茫然，为什么前一个不起作用而后者起作用，他们两个应该做的一样。我错过了什么？这可能与 jQuery datepicker 在事件到达正文之前被重组(它的整个内容 block 在导航上重建)有关(但这没有意义)？

下面添加了带有问题的代码段。我只希望箭头(日期选择器导航)停止冒泡到文档/根级别(关闭我的弹出窗口)并且因为日期选择器附加到正文，唯一可用的拦截点是正文/html。

$(function() {
  let popup = $('#some-popup').addClass('visible');
  let input = $('#some-date');
  let toggler = $('#toggler');

  // binding popup
  toggler.on('click', function(e) {
    e.stopPropagation();
    popup.toggleClass('visible');
  });

  // initializing jQuery UI datepicker
  input.datepicker();

  // closing popup on document clicks other than popup itself
  $(document).on('click', function(e) {
    let target = $(e.target);

    if (target.is('.ui-icon, .ui-datepicker-prev, .ui-datepicker-next')) {
      console.warn('shouldn\'t have reached this, got: ' + target.attr('class'));
    }

    if (!(target.is('#some-popup'))) {
      popup.removeClass('visible');
    }
  });

  // trying to prevent click from reaching document
  $('body').on('click', '.ui-icon, .ui-datepicker-prev, .ui-datepicker-next', function(e) {
    e.stopPropagation();
  })
});
#some-popup {
  padding: 15px 25px;
  background: #000;
  color: #fff;
  display: none;
  max-width: 200px;
}

#some-popup.visible {
  display: block;
}

#toggler {
  margin-bottom: 10px;
}
<head>
  <link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>

  <div id="some-popup">
    This is the popup
  </div>
  <button type="button" id="toggler">Show/Hide Popup</button>
  <form>
    <label for="some-date">The Date-Picker</label>
    <input id="some-date" onclick="event.stopPropagation();" />
  </form>
</body>

最佳答案

委托(delegate)事件不会触发，因为当您单击箭头时，首先会触发箭头按钮的单击事件，jquery-ui-datepicker 从 body 中删除整个日历元素。元素并为上个月/下个月生成新日历。

您可以通过检查元素是否有任何父元素来验证元素是否被删除 <body>标记即通过检查 closest('body') 的长度.

    $('body').on('click', function (e) {
        if ($(e.target).is('.ui-icon')) {
            console.log($(e.target).closest('body').length);
            // Prints 0 i.e this element is not a child of <body>
        }
    });

要触发委托(delegate)事件，目标元素必须是事件绑定(bind)元素的子元素，否则 jQuery 不会触发事件。下面的Demo证实了这一点。

$(function() {
  $('.a').on('click', function() {
    console.log('Direct Event');
  })
  $('.a').on('click', '.b,.c', function(e) {
    console.log('Delegate Event');
  })
  $('.b').on('click', function() {
    console.log('datepicker arrow event');
    if($('input').is(':checked')) $(this).remove();
  })
});
.a {
  padding: 20px;
  background: #ffc55a;
  text-align: center;
}
.b {
  margin-top: 5px;
  padding: 5px;
  background: #7ddbff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  This is the parent element (Delegate Bound Element)
  <div class="b">
    This is the Arrow element of date-picker (Delegate Target)<br>
    Click on it to see how many events fire
  </div>
</div>
<input type="checkbox" checked> Remove On<br>
With Remove Off 3 events fire<br>
With Remove On 2 events fire, Delegate event does not fire<br>

关于javascript - jQuery 事件委托(delegate)不适用于 jQuery UI 日期选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49260801/

jQueryjavascriptcode39functionjquery-ui-datepickerevent-bubblingevent-delegation

有关javascript - jQuery 事件委托(delegate)不适用于 jQuery UI 日期选择器的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  5. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  6. ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2

    这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build

  7. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  10. ruby-on-rails - ruby 日期方程不返回预期的真值 - 2

    为什么以下不同？Time.now.end_of_day==Time.now.end_of_day-0.days#falseTime.now.end_of_day.to_s==Time.now.end_of_day-0.days.to_s#true 最佳答案 因为纳秒数不同:ruby-1.9.2-p180:014>(Time.now.end_of_day-0.days).nsec=>999999000ruby-1.9.2-p180:015>Time.now.end_of_day.nsec=>999999998

随机推荐