Javascript 无法单击动画元素

我只是想知道我能做些什么。 我有一个工作效果（“transfer”）动画，它会影响transfer CSS和它要去的元素。我真的希望在动画期间和之后可以单击的元素。现在，它只能在动画结束后单击

$(document).on('ready', function() {
    @if ($stimuli['transfer'] == true)
        $("#sample").effect("transfer", {
            to: $("#{{ $stimuli['sample'][0] }}")
        }, 6500, function() {
            $('#{{ $stimuli['sample'][0] }}').append('<a href="response/{{$stimuli['sample'][0]}}"><div class="ui-effects-transfer"></div></a>');
            $('#{{ $stimuli['sample'][0]}}').css("border", "10px solid green");
            $('.ui-effects-transfer').effect("shake", 2000);
        });
});

我只能在动画完成后单击它。我想能够点击它，即使在动画。我们能做什么

编辑1 我试过包括：

$("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample']}}";
});

这是可行的，但当传输类与图片重叠时，它将停止工作。我还尝试添加以下内容：

    $(".ui-effects-transfer").click(function(){
    window.location.href = "response/{{$stimuli['sample'][0]}}";
});   

但是，由于类在开始之前没有创建，因此它不起作用。我试着用同一个类放置另一个div，但用id隐藏它，但仍然无法单击该类

我正在尝试做其他用户所做的事情： 编辑

$(document).on('ready', function() {



@if ($stimuli['transfer'] == true)
 $("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample'][0]}}";
});   



$("#sample").effect("transfer", {to: $("#{{ $stimuli['sample'][0] }}")}, 6500, function () {

   $('#{{ $stimuli['sample'][0] }}').append('<a href="response/{{$stimuli['sample'][0]}}"><div class="ui-effects-transfer"></div></a>');

           $('#{{ $stimuli['sample'][0]}}').css("border", "10px solid green");

           $('#extraTransfer').hide();





}).on('click', function(){
        window.location.href = "response/{{$stimuli['sample'][0]}}";


});

    });
@endif

$（document）.on（'ready'，function（）{
@如果（$stimulis['transfer']==true）
$（“{{$刺激['sample'][0]}”）。单击（函数（）{
window.location.href=“response/{{$stimulis['sample'][0]}”；
});   
$（“#样本”）。效果（“转移”，{to:$（“#{{$stimulis['sample'][0]}”）}，6500，函数（）{
$（'{{$刺激['sample'][0]}'）。追加（'''）；
$（'{{$stimuli['sample'][0]}'）.css（“border”，“10px纯绿色”）；
$（“#外部传输”）.hide（）；
}).on（'单击'，函数（））{
window.location.href=“response/{{$stimulis['sample'][0]}”；
});
});
@恩迪夫

---

但该类ui效果在短期内仍会传输：

如果动态克隆对象，则可以通过类似于

$（'.myDynamicObject'）的方式触发动态添加的对象单击事件。'click'，function（）{…}

更新：

我没有深入研究你的密码。但是我认为（可能）你的选择器不起作用，因为

“transfer”

效果是在内部克隆你的对象，然后做动画效果。。。您可以通过执行以下简单更改来检查这一点：

更改此行：

$("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample']}}";
});

$("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample']}}";
});

到

希望这有帮助。如果没有，请告诉我

更新2:

尽管有您的评论，但似乎

.ui effects transfer

正在包装您的对象，并且您的单击事件没有触发。所以，请试试这个：

例如，如果对象位于id='table1'的表中。比如：

<table id='table1'>
.
.
.
<td id="{{$stimuli['comparison'][0]}}"> 
    <a href='response/{{ $stimuli['comparison'][0]}}'>
        <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][0]) }}.jpg' />
    </a>
</td>
.
.
.
</table>

到

如果它解决了问题。然后看一看

---

请更新我。

使元素后面的内容可单击的一种方法是使用以下CSS

  pointer-events: none;

---

这使您可以单击传输动画将要播放的图片。尽管转移图片与我们的图片重叠，但我们仍希望单击图片，因此我们可以在ui effects转移类中使用上面显示的简单css。

当元素被设置动画时，它们通常被包装在

ui effects包装器中，因此，根据您附加单击事件的方式，选择器可能在包装器就位时不匹配并触发单击。因此，您的意思是，如果某个元素正在设置动画，则href可能无法运行，我需要javascript onClick？我实际上不需要ui效果传输的类可点击的，而不是我更喜欢的，如果它只是透明的，这样我就可以点击它背后的东西。有什么办法吗？我试过这个只是为了确保你可以点击动画元素我试过这个检查我的编辑。。。但我的转会似乎有点不同。我该如何处理这个问题呢？见新edits@JPFoster . 我更新了我的答案。请检查一下，我已经试过了。我可以点击图片。然而，当transfer元素.ui effects transfer与$stimuli['sample']元素重叠时，我就不能再点击它了。此外，当我将on（'click'）放在.ui effects传输元素上时，它也不起作用。我认为这是因为它尚未创建。.我尝试将.on（click）附加到传输效果或之后，但没有任何区别。我曾经尝试使用setTimeout来建立on（'click'），但也不起作用。
$("#{{ $stimuli['sample'][0] }}").click(function(){
    window.location.href = "response/{{$stimuli['sample']}}";
});

$( "#table1" ).on( "click", "#{{ $stimuli['sample'][0] }},.ui-effects-transfer", function() {
    window.location.href = "response/{{$stimuli['sample']}}";
});

  pointer-events: none;