独特的jQuery点击问题-第一次点击同一元素后停止触发
Unique jQuery click issue - stops firing after first click on same element
我遇到了一个相当独特的问题,我没有看到任何关于…的信息。任何地方。似乎在第一次点击之后,点击事件在元素上中断了(不总是在第二次,似乎没有任何一致性-除了第一次点击总是触发)-一旦点击事件停止工作,它需要两次点击(而不是双击)才能触发点击事件。
下面是一些细节:
在页面加载时,我通过一个JSON字符串进行解析,以填充X动态生成的列表,类似于下拉菜单。在代码中,在每个"下拉菜单"生成并显示在屏幕上后,我立即应用.click(function(){
…
这是可疑的脚本变量"tags"代表一个对象,它基本上是一个下拉菜单的集合。
$.each(tags, function(k, v){
v.display('div#tags');
var selector = '#' + v.getId();
if(v.isTabled()){
selector += ' tr.Option td';
}else{
selector += ' .Option';
}
var narrowedProducts = [];
$(selector).click(function(){
$.each($('div.Select'), function(i,e){
var temp = $(this).children('input').attr('value');
narrowedProducts = Row.narrowProducts(temp.split('-'), narrowedProducts);
});
if(narrowedProducts.length === 1){
$('input#THEPRODUCT')
.attr('name', narrowedProducts[0])
.attr('value', narrowedProducts[0])
}else if(narrowedProducts.length === 0){
$('input#THEPRODUCT')
.removeAttr('name')
.removeAttr('value')
}else{}
narrowedProducts = []; return;
});
});
和下拉菜单的HTML…
<div id="tags">
<input type="input" id="THEPRODUCT" />
<div class="Select Select-sizechart" id="sizechart">
<span class="Display">Select a sizechart:</span><input type="hidden" name=
"sizechart" />
<table class="Selectable">
<tbody>
<tr class="TableHeading">
<th>Size</th>
<th>Comparable Size</th>
<th>Bust</th>
<th>Hip</th>
<th>Back Length</th>
</tr>
<tr class="Option" rel="L" id="68435-68414-68416-68423">
<td>L</td>
<td>16-18</td>
<td>43"-45"</td>
<td>45"-47"</td>
<td>43"</td>
</tr>
<tr class="Option" rel="XL" id="68432-68437-68419-68428">
<td>XL</td>
<td>20-22</td>
<td>47"-49"</td>
<td>49"-51"</td>
<td>44"</td>
</tr>
<tr class="Option" rel="S" id="68433-68420-68425-68431">
<td>S</td>
<td>8-10</td>
<td>36"-37"</td>
<td>38"-39"</td>
<td>41"</td>
</tr>
<tr class="Option" rel="XS" id="68436-68417-68424-68429">
<td>XS</td>
<td>4-6</td>
<td>34"-35</td>
<td>36"-37"</td>
<td>40"</td>
</tr>
<tr class="Option" rel="M" id="68415-68418-68421-68427">
<td>M</td>
<td>12-14</td>
<td>38.5"-40.5"</td>
<td>40.5"-42.5"</td>
<td>42"</td>
</tr>
</tbody>
</table>
</div>
<div class="Select Select-color" id="color">
<span class="Display">Select a color:</span><input type="hidden" name="color" />
<div class="Selectable">
<div class="Option" rel="River" id="68435-68418-68420-68424-68428">
River
</div>
<div class="Option" rel="Smoke" id="68432-68433-68414-68415-68417">
Smoke
</div>
<div class="Option" rel="Punch" id="68436-68419-68423-68427-68431">
Punch
</div>
<div class="Option" rel="Sandstone" id="68437-68416-68421-68425-68429">
Sandstone
</div>
</div>
</div>
</div>
有没有人有任何线索如何解决这个问题,以创造更好的用户体验?
我研究了委托(和live),但不幸的是,由于我无法控制的原因,我不得不使用1.3.2版本。
还有其他建议吗?
我不能告诉你为什么会出现这个问题,但如果我是你,我会考虑使用委托的点击处理程序,而不是将相同的点击函数绑定到所有这些元素。
试着阅读http://api.jquery.com/delegate/-它可能只是解决你的问题,或者至少使你的代码执行得更好;)
相关文章:
- 第一次未播放HTML音频元素
- 滚动浏览列表元素不会在第一次点击时开始
- 如果第一次单击有效,则第二次单击元素
- 不读取 while 循环中表单元素第一次迭代 ASP.NET
- 如何停止在第一次按下回车键时触发第一个 onclick 事件的元素
- this.style.cursor='手',当我把鼠标悬停在元素上时,第一次没有工作
- jQuery remove()在第一次尝试时没有删除,即使要删除的元素当时是可见的
- javascript向下拖动一个元素.第一次拖动后跳转
- Javascript获取数组中重复元素第一次和最后一次出现的索引
- 如何仅在用户第一次滚动到某个元素时运行自定义函数
- 元素.自定义指令'中的replaceWith链接只在第一次调用时起作用
- 独特的jQuery点击问题-第一次点击同一元素后停止触发
- ReactJS:显示或隐藏元素只在第一次点击按钮时起作用
- JavaScript函数只在第一次点击时改变元素的边距
- 添加和删除元素的形式,第一次点击工作,随后的点击不
- Button元素在第一次调用时未被检索
- 在第一次调试中,第二个元素没有与第一个元素同时出现
- 简单的基于iframe的AJAX脚本:第一次调用产生'null'元素,后续调用'We’我们的工作
- 当我第一次隐藏元素时,If语句从未返回true
- AngularJS的animate on children元素第一次成功,第二次失败