文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >JQuery事件只触发一次

问JQuery事件只触发一次
EN

Stack Overflow用户
提问于 2019-09-29 16:51:43
回答 2查看 489关注 0票数 2

我试图使用SlimSelect制作一个多选择的下拉框，并在每个字段中使用水平文本滚动。现在一切看起来都正常，但问题是，它只工作了一次(第一次点击一个值)。在那之后，mouseover和mouseout似乎就放弃了。我已经看过堆栈了，但是所有这些问题都有代码答案，并且缺乏关于“为什么它只触发一次”的一般解释，所以这对我没有什么帮助。

​

代码语言：javascript
复制
$('.ms-class > option').addClass('scroll-text ellipsis');

new SlimSelect({
  select: '#slim-multi-select',
  allowDeselectOption: true,
  showContent: 'down',
})

$(".ss-option.scroll-text").on({
  mouseover: function() {
    $(this).removeClass("ellipsis");
    var maxscroll = $(this)[0].scrollWidth;
    var speed = maxscroll * 15;
    $(this).animate({
      scrollLeft: maxscroll
    }, speed, "linear");
  },
  mouseout: function() {
    $(this).stop();
    $(this).addClass("ellipsis");
    $(this).animate({
      scrollLeft: 0
    }, 'slow');
  }
});
代码语言：javascript
复制
.ms-class {
  width: 200px !important;
}

.ms-class .ss-content {
  z-index: 2;
}

.ms-class .ss-content .ss-list {
  max-height: 100% !important;
}

.ms-class .ss-multi-selected .ss-values .ss-value {
  font-size: 14px;
  margin: 5px 5px 5px 0;
  background-color: #884fa1;
}

.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
  display: inline-block;
  width: 33%;
}

.ms-class .ss-content .ss-list .ss-option.ss-hide,
.ms-class .ss-content .ss-list .ss-option.ss-hide {
  display: none;
}

.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
  display: inline-block;
  width: 25%;
}

.ms-class .ss-content .ss-list .ss-option {
  vertical-align: middle;
  text-align: center;
  height: 50px;
  line-height: 0.9em;
  white-space: nowrap;
  overflow: hidden !important;
}

.ms-class .ss-content .ss-list .ss-option:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.ss-option:hover {
  background-color: #884fa1 !important;
  color: white;
}

.ms-class .ss-multi-selected .ss-values .ss-disabled,
.ms-class .ss-content .ss-search input {
  font-family: 'Exo 2', 'Font Awesome 5 Free';
  font-weight: 900 !important;
  color: #444444 !important;
}

.ms-class .ss-multi-selected .ss-values .ss-disabled {
  margin: 0 8px;
}

.ms-class .ss-content .ss-list .ss-option:only-child,
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
  width: 100% !important;
}

.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2)~.ss-option {
  width: 50% !important;
}

.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3)~.ss-option {
  width: 33% !important;
}

.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
  width: 100% !important;
}

.ms-class .ss-multi-selected {
  border-radius: 5px !important;
  border: solid 1px #e8e8e8 !important;
  min-height: 42px !important;
  line-height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.ms-class .ss-multi-selected .ss-add {
  display: flex;
  flex: 0 1 3px;
  margin: 14px 12px 0 5px;
}

.ms-class .ss-multi-selected .ss-add .ss-plus,
.ms-class .ss-multi-selected .ss-add .ss-plus:after {
  background: #999;
}

.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
  background-color: rgba(136, 79, 161, 0.32);
}

.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:hover {
  color: white !important;
}

.ellipsis {
  text-overflow: ellipsis;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slim-multi-select" class="ms-class" multiple>
  <option value="value 1">Some long value that doesn't fit here</option>
  <option value="value 2">Value 2</option>
  <option value="value 3">Another real long value that doesn't fit</option>
  <option value="value 4">Value 4</option>
  <option value="value 5">Value 5</option>
</select>

​

我不太擅长前端的东西，所以我很感激你的帮助。

css
javascript
jquery
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-29 17:36:00

对js的修改将起作用：

代码语言：javascript
复制
$(".ss-content").on('mouseover', '.ss-option.scroll-text', function() {
  $(this).removeClass("ellipsis");
  var maxscroll = $(this)[0].scrollWidth;
  var speed = maxscroll * 15;
  $(this).animate({
    scrollLeft: maxscroll
  }, speed, "linear");
});
$(".ss-content").on('mouseout', '.ss-option.scroll-text', function() {
  $(this).stop();
  $(this).addClass("ellipsis");
  $(this).animate({
    scrollLeft: 0
  }, 'slow');
});

解释为什么您的代码不能工作

您的代码只起作用，直到您单击任何一项。单击时，slimSlect删除所有dom并重新创建它，这也会删除附加到DOM的事件。由于您的DOM和附加到它的事件被移除，这两个mouseout/over事件都没有工作。

我如何解决这个问题：

看看代码块，$(".ss-content").on('mouseout', '.ss-option.scroll-text'。我已经在这里附加了事件，.ss-content，当您mouserout/over，它将搜索类.ss-option.scroll-text，它将始终存在。

如果您从父级进行选择，则动态子域将始终将该事件附加到该事件中。

How @Nowshath解决了这个问题：添加了一个beforeOpen and onChange钩子，每当您尝试打开或更改该值时，它调用方法ScrollText将事件注册到dom

​

代码语言：javascript
复制
$('.ms-class > option').addClass('scroll-text ellipsis');

new SlimSelect({
  select: '#slim-multi-select',
  allowDeselectOption: true,
  showContent: 'down',
})

$(".ss-content").on('mouseover', '.ss-option.scroll-text', function() {
  $(this).removeClass("ellipsis");
  var maxscroll = $(this)[0].scrollWidth;
  var speed = maxscroll * 15;
  $(this).animate({
    scrollLeft: maxscroll
  }, speed, "linear");
});
$(".ss-content").on('mouseout', '.ss-option.scroll-text', function() {
  $(this).stop();
  $(this).addClass("ellipsis");
  $(this).animate({
    scrollLeft: 0
  }, 'slow');
});
代码语言：javascript
复制
.ms-class {
  width: 200px !important;
}

.ms-class .ss-content {
  z-index: 2;
}

.ms-class .ss-content .ss-list {
  max-height: 100% !important;
}

.ms-class .ss-multi-selected .ss-values .ss-value {
  font-size: 14px;
  margin: 5px 5px 5px 0;
  background-color: #884fa1;
}

.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
  display: inline-block;
  width: 33%;
}

.ms-class .ss-content .ss-list .ss-option.ss-hide,
.ms-class .ss-content .ss-list .ss-option.ss-hide {
  display: none;
}

.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
  display: inline-block;
  width: 25%;
}

.ms-class .ss-content .ss-list .ss-option {
  vertical-align: middle;
  text-align: center;
  height: 50px;
  line-height: 0.9em;
  white-space: nowrap;
  overflow: hidden !important;
}

.ms-class .ss-content .ss-list .ss-option:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.ss-option:hover {
  background-color: #884fa1 !important;
  color: white;
}

.ms-class .ss-multi-selected .ss-values .ss-disabled,
.ms-class .ss-content .ss-search input {
  font-family: 'Exo 2', 'Font Awesome 5 Free';
  font-weight: 900 !important;
  color: #444444 !important;
}

.ms-class .ss-multi-selected .ss-values .ss-disabled {
  margin: 0 8px;
}

.ms-class .ss-content .ss-list .ss-option:only-child,
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
  width: 100% !important;
}

.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2)~.ss-option {
  width: 50% !important;
}

.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3)~.ss-option {
  width: 33% !important;
}

.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
  width: 100% !important;
}

.ms-class .ss-multi-selected {
  border-radius: 5px !important;
  border: solid 1px #e8e8e8 !important;
  min-height: 42px !important;
  line-height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.ms-class .ss-multi-selected .ss-add {
  display: flex;
  flex: 0 1 3px;
  margin: 14px 12px 0 5px;
}

.ms-class .ss-multi-selected .ss-add .ss-plus,
.ms-class .ss-multi-selected .ss-add .ss-plus:after {
  background: #999;
}

.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
  background-color: rgba(136, 79, 161, 0.32);
}

.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:hover {
  color: white !important;
}

.ellipsis {
  text-overflow: ellipsis;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slim-multi-select" class="ms-class" multiple>
  <option value="value 1">Some long value that doesn't fit here</option>
  <option value="value 2">Value 2</option>
  <option value="value 3">Another real long value that doesn't fit</option>
  <option value="value 4">Value 4</option>
  <option value="value 5">Value 5</option>
</select>

​

票数 4
EN

Stack Overflow用户

发布于 2019-09-29 17:35:42

我认为您的div是在数据更改时重新生成的，因此事件绑定没有正常进行。我已经在公开事件和变更事件中补充了这一点。

​

代码语言：javascript
复制
$('.ms-class > option').addClass('scroll-text ellipsis');

new SlimSelect({
  select: '#slim-multi-select',
  allowDeselectOption: true,
  showContent: 'down',
  beforeOpen: function () { console.log('beforeOpen'); ScrollText(); },
   onChange: function(info){
    console.log(info);
    ScrollText();
  }
})

function ScrollText() {
  $(".ss-option.scroll-text").on({
    mouseover: function() {
      $(this).removeClass("ellipsis");
      var maxscroll = $(this)[0].scrollWidth;
      var speed = maxscroll * 15;
      $(this).animate({
        scrollLeft: maxscroll
      }, speed, "linear");
    },
    mouseout: function() {
      $(this).stop();
      $(this).addClass("ellipsis");
      $(this).animate({
        scrollLeft: 0
      }, 'slow');
    }
  });
}
代码语言：javascript
复制
.ms-class {
  width: 200px !important;
}

.ms-class .ss-content {
  z-index: 2;
}

.ms-class .ss-content .ss-list {
  max-height: 100% !important;
}

.ms-class .ss-multi-selected .ss-values .ss-value {
  font-size: 14px;
  margin: 5px 5px 5px 0;
  background-color: #884fa1;
}

.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
  display: inline-block;
  width: 33%;
}

.ms-class .ss-content .ss-list .ss-option.ss-hide,
.ms-class .ss-content .ss-list .ss-option.ss-hide {
  display: none;
}

.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
  display: inline-block;
  width: 25%;
}

.ms-class .ss-content .ss-list .ss-option {
  vertical-align: middle;
  text-align: center;
  height: 50px;
  line-height: 0.9em;
  white-space: nowrap;
  overflow: hidden !important;
}

.ms-class .ss-content .ss-list .ss-option:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.ss-option:hover {
  background-color: #884fa1 !important;
  color: white;
}

.ms-class .ss-multi-selected .ss-values .ss-disabled,
.ms-class .ss-content .ss-search input {
  font-family: 'Exo 2', 'Font Awesome 5 Free';
  font-weight: 900 !important;
  color: #444444 !important;
}

.ms-class .ss-multi-selected .ss-values .ss-disabled {
  margin: 0 8px;
}

.ms-class .ss-content .ss-list .ss-option:only-child,
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
  width: 100% !important;
}

.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2)~.ss-option {
  width: 50% !important;
}

.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3)~.ss-option {
  width: 33% !important;
}

.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
  width: 100% !important;
}

.ms-class .ss-multi-selected {
  border-radius: 5px !important;
  border: solid 1px #e8e8e8 !important;
  min-height: 42px !important;
  line-height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.ms-class .ss-multi-selected .ss-add {
  display: flex;
  flex: 0 1 3px;
  margin: 14px 12px 0 5px;
}

.ms-class .ss-multi-selected .ss-add .ss-plus,
.ms-class .ss-multi-selected .ss-add .ss-plus:after {
  background: #999;
}

.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
  background-color: rgba(136, 79, 161, 0.32);
}

.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:hover {
  color: white !important;
}

.ellipsis {
  text-overflow: ellipsis;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slim-multi-select" class="ms-class" multiple>
  <option value="value 1">Some long value that doesn't fit here</option>
  <option value="value 2">Value 2</option>
  <option value="value 3">Another real long value that doesn't fit</option>
  <option value="value 4">Value 4</option>
  <option value="value 5">Value 5</option>
</select>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/58157314

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档