如何为on(事件)触发事件

Question

我希望触发一个事件来执行包装在$('.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
        }
    }

我尝试过的:

我在上面搜过很多东西。

由于我触发事件的内容是通过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()方法之后。

我试着改变我做这个事件的元素。

也改变了触发的事件。

现在我觉得我什么都试过了，所以我请求你的帮助。

Answer 1

$('element_selector').trigger('eventname', param1, param2,...);

这将触发给定的事件，如果需要，则params是可选的。