javascript - 无法自定义交互式 JavaScript 内容

Question

我们使用 Moodle 3.5 版本并使用 H5P 插件进行交互式视频。我们需要在提交按钮上添加另一个操作

请检查链接https://h5p.org/interactive-video 。回答问题后，将出现如下所示的摘要屏幕:

<script>

function checkclick()
{
    $(document).ready(function(){

        $(".h5p-interactive-video-endscreen-submit-button").click(function(){
            alert("submitted");

        });
     });
}

$(document).ready(function(){
    iframe=H5P.$body.contents();
    iframe.find(".h5p-interactive-video-endscreen-submit-button").click(function(){
          alert("hello");
    });
});

// H5P.$body.contents().find(".h5p-interactive-video-endscreen-submit-button")

// $(document).ready(function(){
//        var button= H5P.$body.contents().find(".h5p-interactive-video-endscreen-submit-button");
//     button.attr("id","myclass");
//        console.log(button);
// });

</script>

已尝试上述技术来获取单击按钮时的警报，但没有成功。

Answer 1

更改此:

$(document).ready(function(){
    iframe=H5P.$body.contents();
    iframe.find(".h5p-interactive-video-endscreen-submit-button").click(function(){
      alert("hello");
    });
});

对此:

$(document).ready(function(){
    iframe=H5P.$body.contents();
    $(document).on('click',function(){
        if(iframe.find(".h5p-interactive-video-endscreen-submit-button").is(":hover")){
          alert('hello');
        }
    });
});

如果无法检测到元素点击并且它有效，我通常会这样做。