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
        }
    }

我尝试了什么：

我在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（）方法之后设置触发器 我已经尝试更改我参与活动的元素并且还改变了触发的事件。

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

Answer 1

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

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

如何触发事件（事件）

1 个答案: