javascript - 如何触发 on(event) 的事件

问题描述

我想触发一个事件来执行包含在$('.selector').on('event').

选择器在我触发事件之前发生了变化。
要理解这个问题：我在第 1 页上有一个文本，并且该函数触发单击以转到第 2 页（顺便说一句，这有效！）。所以现在我在第 2 页，我想触发单击以执行on()方法中的代码。 这是行不通的。

我尝试了很多东西，但没有任何效果，执行方法中的代码的唯一on()方法是手动单击选择器。

这实际上是整个代码：

jQuery(function() {

    // the input field
    $input = jQuery("input[type=\'search\']");
    // clear button
    var $clearBtn = jQuery("button[data-search=\'clear\']"),
        // prev button
        $prevBtn = jQuery("button[data-search=\'prev\']"),
        // next button
        $nextBtn = jQuery("button[data-search=\'next\']"),
        // the context where to search
        $content = jQuery(".search_content"),
        // jQuery object to save <mark> elements
        $results,
        // the class that will be appended to the current
        // focused element
        currentClass = "current",
        // top offset for the jump (the search bar)
        offsetTop = 50,
        // the current index of the focused element
        currentIndex = 0,
        //the current ajaxpage
        currentPage = 1;

    /**
     * Jumps to the element matching the currentIndex
     */
    function jumpTo() {
        if ($results.length) {

            var position,
                $current = $results.eq(currentIndex);

            $results.removeClass(currentClass);
            if ($current.length) {
                $current.addClass(currentClass);
                position = $current.offset().top - offsetTop - 100;
                window.scrollTo(0, position);
            }
        }
    }
    var mark = function() {

        // Read the keyword
        var keyword = $input.val();

        // empty options
        var options = {};

        // Remove previous marked elements and mark
        // the new keyword inside the content
        jQuery(".search_content").unmark({
            done: function() {
                jQuery(".search_content").mark(keyword, options);
                $results = $content.find("mark");
                currentIndex = 0;
                jumpTo();
            }
        });
    };

    function registerClear() {
        $input.on("input", function() {
            searchVal = this.value;
            $content.unmark({
                done: function() {
                    $content.mark(searchVal, {
                        separateWordSearch: true,
                        done: function() {
                            $results = $content.find("mark");
                            currentIndex = 0;
                            console.log(searchVal);
                            console.log("page2");
                            jumpTo();
                        }
                    });
                }
            });
        });

    }
    registerClear();

    /**
     * Clears the search
     */
    $clearBtn.on("click", function() {
        $content.unmark();
        $input.val("").focus();
    });

    /**
     * Next and previous search jump to
     */
    $nextBtn.add($prevBtn).on("click", function() {
        if ($results.length) {
            currentIndex += jQuery(this).is($prevBtn) ? -1 : 1;
            if (currentIndex < 0) {
                currentIndex = $results.length - 1;
            }
            if (currentIndex > $results.length - 1) {
                currentIndex = 0;
            }
            //TODO : - LINK DONE - SEARCH ON EACH PAGE IF THERE ARE OCCURENCE
            if (currentIndex == 0 && jQuery(this).is($nextBtn)) {
                if (confirm("No more instances found! Go to the next page?")) {
                    alert("NEXT PAGE");
                    jQuery("a[data-page=\'2\']").click();

                    jQuery(document).ready(function() {
                        jQuery(".search_content").click();
                    });
                    jQuery(document.body).on("click", ".search_content", mark)
                    registerClear();
                } else {
                    //do nothing
                }
            }
            jumpTo();
        }
    });

});

this is the important part:

    if (currentIndex == 0 && jQuery(this).is($nextBtn)) {
        if (confirm("No more instances found! Go to the next page?")) {
            alert("NEXT PAGE");
            jQuery("a[data-page=\'2\']").click();

            jQuery(document).ready(function() {
                jQuery(".search_content").click();
            });
            jQuery(document.body).on("click", ".search_content", mark)
            registerClear();
        } else {
            //do nothing
        }
    }

我试过的：

我在 SO 上搜索了很多东西。
由于我触发事件的内容是通过 ajax 加载的，我认为这是因为我很快触发了事件，所以我尝试将我的代码包装在 document.ready 中，或者使用 setTimeOut 函数。没有结果。

我试过这个：

jQuery('#bar')[0].click();

这个：

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

我尝试将触发器放在on() 方法之后。
我试过改变我做事件的元素。
并且还更改了触发的事件。

现在我觉得我已经尝试了一切，所以我请求你的帮助。

标签： javascriptjqueryeventsjquery-events

javascript - 如何触发 on(event) 的事件

问题描述

解决方案

推荐阅读