Question

我有一些应该响应用户交互的HTML。这是我要脱机工作的页面。当我在线加载页面后，我得到了完全呈现的HTML。一些HTML包含显示/隐藏功能，并且旨在防止元素单击的不当操作。例如，请参见：

<div id="area49253971_6938" class="component interaction-component float-none clear-none  interaction_booted">
    <div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
    <div>
        <div class="data-field interaction-type">RevealContent</div>
        <div class="interaction_title"></div>
        <div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
            <div class="pointer">
                <td>
                    <div id="area49253971_6940" class="component image-component float-left clear-none  booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
                    <p class="body" id="area49253971_6941"><em><strong><a href="#">Some question</a></strong></em></p>
                </td>
            </div>
            <div style="display: block;">
                <td>
                    <p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
                </td>
            </div>
        </div>
        <div class="interaction_data" style="display: none;">
            <div id="area49253971_6939" class="component table-component float-none clear-none ">
                <div class="component_caption"></div>
            </div>
        </div>
    </div>
</div>

该应用程序的代码无法离线工作（我认为是由于该应用程序的ajax调用以及许多其他依赖项和特定于应用程序的东西）。（顺便说一下，您可以在https://jsfiddle.net/0s6xdk9q/1/上看到我试图将其重写为纯jQuery的应用程序代码）。因此，我决定像这样重写应用程序功能：

$(document).ready(function() {
    $(this).on('click', '.interaction_booted', function () {

        interactionData = $(this).find(".interaction_data");
        this.container = $(this).find(".interaction_content");

        var contentToReveal = ($(this).find('.RevealContent')).children()[1];
        var initialContent = ($(this).find('.RevealContent')).children()[0];

        $(contentToReveal).slideToggle('slow');

        var a = initialContent.find('a');
        a[0].addEventListener("click", function(e){
           e.preventDefault();
        }, false);

    });

});

有些事情不太正确。可能是因为我有多个点击事件。无论如何，我通过浏览Chrome中的代码来确认变量 a 确实是我期望的元素。所有元素选择器都可以正常工作。但是我没有做任何事情导致此preventDefault无法正常工作。我觉得有一个简单的答案，只是看不到。另外，我正在尝试以一种不需要我向HTML添加任何内容的方式进行操作。

有想法吗？

谢谢，布莱恩

知道为什么在这种情况下未调用此JavaScript preventDefault函数吗？

0 个答案: