Question

我有一个HTML页面，其中列出了div个组件，每个div组件调用一个函数并将this作为对象传递。 div看起来像这样：

<div id="pull-requests-view">
    <div class="green-header">This is the 1st title</div>
    # this is the div that will flash on double click
    <div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
    <img class="profile-photo" src="someImageURL">
    <div class="pill-green">
    <a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
    </div>
    </div>
</div>

这里真正发生的事情是，有多个div，具有不同的id。当我点击div时，点击flashAndMessage()并使用参数this调用我的div使用JQuery fadeIn()和{{fadeOut()闪烁和闪烁1}}。

除了详细信息之外，实际问题是我实施了轮询，重新呈现HTML，包括所有divs。所以基本上一旦页面更新，闪烁和闪烁就会丢失。

我尝试了在页面重新加载之前存储this对象的全局变量，并尝试将变量传递给jQuery find()函数，以便可以重新应用flashAndMessage()。

然而它对我不起作用。这是我的职能：

function unblink(selector) {
    $(selector).stop()
    $(selector).fadeIn({opacity: 1})
}

function blink(selector) {
    $(selector).fadeOut('slow', function () {
        $(this).fadeIn('slow', function () {
            blink(this);
        });
    });
}

function flashAndMessage(selector) {
    var pullReqURL = $(selector).find('.hypLink').attr('href')
    blinkList.push(selector) # this is where the `div` is stored before the page reloads
    blink(selector)
}

注意：blinkList是一个全局数组，它是在其他所有数据之上定义的。我有一个循环，在div重新加载后运行，我确实看到我存储在列表中的那些div。但是，当我遍历该列表并将obj传递给flashAndMessage()时，它不起作用。当重新绘制或失去一些身份时，感觉对象不一样。

Answer 1

假设您的<div id="pull-requests-view">的父级未重新加载轮询代码，则应使用事件委派（而不是内联事件处理程序）。

<div id="parent-id-that-isnt-updated">
   <div id="pull-requests-view">
      ...
   </div>
</div>

您可以将事件侦听器附加到不更新的父级，并使其仅在单击的元素与选择器匹配时触发：

var $staticParent = $('#parent-id-that-isnt-updated');

$staticParent.on('dblclick', '.green', function() {
  flashAndMessage(this);
});

$staticParent.on('click', '.green', function() {
  unblink(this);
});

Answer 2

由于限制，代码段不起作用，但代码已经过测试且功能正常。

＆＃13;

function unblink(selector) {
    $(selector).stop();
    $(selector).fadeIn({opacity: 1});
    sessionStorage.href = "";
}

function blink(selector) {
    $(selector).fadeOut('slow', function () {
        $(this).fadeIn('slow', function () {
            blink(this);
        });
    });
}

function flashAndMessage(selector) {
    sessionStorage.href = $(selector).find('.hypLink').attr('href');
    blink(selector);
}


if (sessionStorage.href) {
      flashAndMessage($("a[href='"+sessionStorage.href+"']").parent().parent());
}

＆＃13;

<div id="pull-requests-view">
    <div class="green-header">This is the 1st title</div>
    <div class="green" ondblclick="flashAndMessage(this)" onclick="unblink(this)" id="tile0">
        <img class="profile-photo" src="someImageURL">
        <div class="pill-green">
            <a class="hypLink" href="UNIQUE_LINK_FOR_EACH_DIV" target="_blank">tag information</a>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在重新加载的HTML页面中找到<div>并将函数应用于它

2 个答案: