Question

我只是想知道我能做些什么。我有一个影响传输CSS的工作效果（'transfer'）动画以及它的去向元素。我真的想要在动画期间和之后可以点击的元素。现在它只能在动画后点击。

$(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);
        });
});

stimuli['sample']的内容如下：

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

我只能在动画完成后点击它。我希望即使在动画期间也可以点击它。我们能做什么？

修改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

但该类ui-effects-transfer仍然

Answer 1

短期内：如果您动态克隆对象，则可以通过类似$('.myDynamicObject').on('click',function() { ... })

的内容触发动态添加的对象点击事件

更新：

我没有深入研究你的代码。但我认为（也许）你的选择器不起作用，因为"transfer"效果是在内部克隆你的对象，然后动画效果......你可以通过做以下简单的改变来检查它：

更改此行：

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

到

$("#{{ $stimuli['sample'][0] }}").on('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>

然后改变

$("#{{ $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']}}";
});

如果它解决了问题。然后看看http://api.jquery.com/on/

请更新我。

Answer 2

可用于制作可点击元素背后的内容的一种方法是使用以下CSS。

  pointer-events: none;

这样您就可以单击传输动画所在的图片。由于我们想要点击图片，尽管传输图片与我们的图片重叠，我们可以在我们的ui-effects-transfer类中使用上面显示的简单css。

无法单击动画元素

2 个答案: