jquery 函数不会在之前单击的 div 上运行

Question

此问题与 this question yesterday 相关。请查看当前jsfiddle here .

我已经能够让它工作，以便单击的 div 能够很好地缩放和动画。但我现在还有另外两个问题:

1. 一旦单击的 div 缩放回原始大小，当我再次单击同一 div 重复该操作时，脚本将不会运行。

2. 我对跳跃式的重新缩放/重新定位不太满意。我似乎无法让它顺利工作。我想我会同意它的原样，但如果它像初始比例/动画一样平滑，我会更高兴。

如果我需要更清楚，请告诉我。

任何帮助将不胜感激! MTIA。

Answer 1

它不会再次工作，因为当它不再是当前状态时，您从中删除了 click 处理程序:

selectedBox.unbind('click');

这将解除 div 中所有点击处理程序的绑定(bind)，包括您最初在 ready 中连接的点击处理程序。

四个选项:

1. 不要解除主点击的绑定(bind)，第二个点击事件使用jQuery的事件“namespacing”:

   $('.current').bind('click.current', function() {
   

   ...然后解除绑定(bind)时:

   selectedBox.unbind('click.current');
   

   确保停止当前点击处理程序中的事件，这样主点击处理程序就不会运行(jQuery 确保处理程序以与连接相反的顺序运行，因此您知道当前处理程序将在主处理程序之前运行，跨浏览器)。没关系，抱歉，这是相反的:jQuery 确保它们按照绑定(bind)的顺序运行，而不是相反的顺序。

   <

2. 为当前点击事件使用命名函数:

   $('.current').click(currentClick);
   function currentClick() {
   

   ...并专门删除它:

   selectedBox.unbind('click', currentClick);
   

   ...再次强调，不要删除主处理程序。

3. 使用delegate而不是主要(非当前)点击的click:

   $('#content').delegate('.box', 'click', boxClickHandler);
   

   它将click事件挂接到盒子的容器上，而不是盒子本身，然后响应点击，因为它们会冒泡。

   在“当前”点击处理程序中，请务必取消点击事件，这样它就不会冒泡到容器中。

   Here's a fiddle随着这一改变的实现。我还对“当前”点击进行了命名，以便对可能也需要知道何时单击某个框的任何其他代码友好。

4. 删除当前点击处理程序后将 boxClickHandler 放回原处:

   selectedBox.unbind('click').click(boxClickHandler);
   

5. 使用单个处理程序并在处理程序内进行分支，具体取决于您是否在框中看到“当前”类。

...或以上的某种组合。

我最喜欢#5。