Question

在jquery中，当我在页面上单击名为quote_box的元素时，我有一个事件。如果单击quote_box，则会出现一个弹出窗口。弹出窗口上的一件事是Facebook图标。如果单击Facebook图标，则会转到其他事件。这个想法是每个报价框代表一个不同的人。如果您单击一个人的报价框，那么发送到Facebook的是一个URL，其末尾的人名称。

当您第一次点击引用框然后单击Facebook图标时，会发生一次Facebook功能。关闭弹出窗口并单击另一个引用框，然后再次单击Facebook图标。 Facebook功能被调用两次。关闭弹出窗口并单击另一个引用框，然后再次单击Facebook图标。 Facebook功能被称为三次，等等。

谁能告诉我为什么会这样？

这是我的代码：

HTML：

    <section class="container">
      <div class="one-fourth" id="Abby">
        <div class="quote_box">
            <div class="person_name quote">Abby McCracken</div>
            <div class="attribution"><span class="person_age">18,</span> <span class="person_where">Greater Latrobe Senior High School</span></div>
        </div>
        <div class="mobile_attribution"><span class="bold">Abby McCracken, 18</span><br/>Greater Latrobe</div>
      </div>
      <div class="one-fourth" id="Ahjani">
        <div class="quote_box">
                <div class="person_name quote">Ahjani Williams</div>
                <div class="attribution"><span class="person_age">17,</span> <span class="person_where">Aliquippa Senior High School</span></div>
        </div>
    ...
</section>

<div id="popup_player">
    <div id="popup_social">
        <i class="fa fa-facebook videoFBlink" aria-hidden="true"></i>
        <i class="fa fa-times"></i>
    </div>

    <video id="person_video" controls playsinline poster="img/mobile_video_still.jpg">

    </video>
</div>

jquery的：

$('.quote_box').on('tap', function() {
        $('.mask').fadeIn();
        //get video file name
        thisID = $(this).parent().attr('id');

        //if click facebook icon for this video 
        $('.videoFBlink').on('tap', function() {
            posttoFB(thisID);
            return false;
        });


    });
function posttoFB(shareFile) {
        console.log(shareFile);
        if (shareFile !== undefined) {
            var shareurl = "https://mywebsite?file=" + shareFile;
        } else {
            var shareurl = "https://nmywebsite";
        }
        window.open('https://www.facebook.com/sharer/sharer.php?u='+escape(shareurl)+'&t='+window.location, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); 
    }

Answer 1

那是因为你设置了多个“tap”事件（里面的事件加倍）

$('.quote_box').on('tap', function() {
    $('.mask').fadeIn();
    //get video file name
    thisID = $(this).parent().attr('id');

    //if click facebook icon for this video 
    $('.videoFBlink').off("tap").on('tap', function() {
        posttoFB(thisID);
        return false;
    });


});

Answer 2

您有一个嵌套的事件处理程序。您创建了一个触发另一个事件创建的事件。您可以在不显示当前对象的情况下创建事件处理程序。我建议取消嵌套这样的事件：

     var currentID = 0;

        $('.quote_box').on('tap', function() {
            $('.mask').fadeIn();
            //get video file name
            currentID = $(this).parent().attr('id');
        });

     //if click facebook icon for this video 
            $('.videoFBlink').on('tap', function() {
                posttoFB(currentID );
                return false;
            });

    function posttoFB(shareFile) {
            console.log(shareFile);
            if (shareFile !== undefined) {
                var shareurl = "https://mywebsite?file=" + shareFile;
            } else {
                var shareurl = "https://nmywebsite";
            }
            window.open('https://www.facebook.com/sharer/sharer.php?u='+escape(shareurl)+'&t='+window.location, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); 
        }

函数被称为n + 1次而不是一次 - 为什么？

2 个答案: