jQuery插件事件偵聽器無法觸發或綁定

Question

我正在創建一個利用彈出窗口的Web應用程序。 我在多個頁面上使用了相同的彈出窗口，但是頁面之間存在各種差異。 所有這些都是通過JavaScript（jQuery）控制的。

因此，我決定創建一個jQuery插件來輕松進行這些更改。 問題是我在插件定義中創建的偵聽器不會在單擊時觸發，甚至不會顯示為綁定到檢查器中的那些元素。 我不確定是什么問題，因為它與通過函數綁定事件沒有什么不同。

這是我的代碼：

(function($) {


    // Plugin Definition
    $.fn.popup = function(options){
        console.log("Popup Initializing");

        // Override default settings with instance settings
        var settings = $.extend({}, $.fn.popup.defaults, options);
        console.log("Settings merged");

        // Saving objects passed into function
        var els = this;



        console.log("Attaching Edit Event Listener");
        // EDIT
        //alert(settings.contentSelector + " " + settings.editButtonSelector);
        $("#content").on("click", ".table .edit", function() {
            console.log("Edit button clicked");
            settings.isEdit = true; settings.isAdd = false;
            row = $(this).parent();
            header = row.siblings(settings.tableHeaderRowSelector);
            headerCells = header.children();
            titleCell = row.children(":first").text();

            $(settings.popupHeaderSelector).html("Editing '" + titleCell + "'");    // set header
            $(settings.popupOriginalIdSelector).val(row.children().eq(0).html());
            $(settings.popupSubmitSelector).html("Update");                         // set submit button text

            // Generate and write form DOM to page
            if (settings.autoGeneratePopupForm){
                formContent = generateFormContent(headerCells, row);         // Generate form inputs
                optionsCurrentValues = formContent[1];                  // Grab current option input values
                $(settings.popupContentSelector).html(formContent);     // write form contents to DOM

                // set options to correct current settings
                $.each(optionsCurrentValues, function(index, value) {
                    $("select[name='"+index+"']").val(value);
                });
            }

            showPopup();
            focusFirstEl();
        });


        console.log("Adding Add Event Listener");
        // ADD
        $(settings.contentSelector).on("click", settings.addButtonSelector, function() {
            console.log("Add button clicked");
            settings.isAdd = true; settings.isEdit = false;
            headerCells = $(this).siblings();
            row = $(this).parent().next(".row").children().not(".icon");


            $(settings.popupHeaderSelector).html("Add New " + dataType);    // set header
            $(settings.popupSubmitSelector).html("Add " + dataType);        // set submit button text

            // Generate and write form DOM to page
            if (settings.autoGeneratePopupForm){
                formContent = generateFormContent(headerCells, row);         // Generate form inputs
                $(settings.popupContentSelector).html(formContent);          // write form contents to DOM
            }

            showPopup();
            focusFirstEl();
        });



        console.log("Adding Cancel Event Listener");
        // CANCEL
        $(settings.popupCancelSelector).click(function() {
            hidePopup();
        });


        console.log("Adding User Enter Submission Prevention");
        // PREVENT ENTER SUBMIT
        $(settings.popupSelector + " form").keydown(function(event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13') {
                event.preventDefault();
                return false;
            }
        });


        console.log("Finished Initializing");
        console.log("");
        console.log(settings);
        // Ensures chainability
        return this;
    };


    /**
        Generates form inputs based on the passed parameters.
        @param headerRow the header row of the associated DOM table.
                         Must be from PHP generated DOM. See ImgsrcUI->printTable
        @param contentRow the row of the associated DOM table to generate
                          the form inputs from.  Must be from PHP generated DOM
                          See ImgsrcUI->printTable
        @returns an array.  1st index is of generated form DOM, 2nd index is of current values of the inputs
    */
    function generateFormContent(headerCells, contentRow){
        formContent = "";       // Empty string filled with generated DOM

        contentRow.children().not(".icon").each(function(index) {
            inputType = headerCells.eq(index).attr("data-inputtype");     // Get type of input this cell should be
            inputLabel = headerCells.eq(index).attr("data-inputlabel");   // Get the text for the label for this cell
            cellVal = settings.isEdit == true ? $(this).text() : "";      // Get current value of cell
            name = inputLabel.replace(/ /g,'');                           // Removed spaces from input label to generate the name attr for the input
            optionsCurrentValues = {};     // assoc array of input name and value so that it can be set after applied to DOM

            switch (inputType){
                case "text":
                formContent += '<label>'+inputLabel+'</label> <input name="new'+name+'" type="'+inputType+'" value="'+cellVal+'">'
                break;

                case "select":
                options = headerCells.eq(index).attr("data-selectoptions"); // get string version of var name 
                options = eval(options); // assign that var value to options
                formContent += '<label>'+inputLabel+'</label> <select name="new'+name+'" id="">'+options+'</select>';
                optionsCurrentValues["new"+name] = cellVal;
                break;

                case "textarea":
                formContent += '<label>'+inputLabel+'</label> <textarea name="new'+name+'" ></textarea>';
                break;
            }
        });

        return [formContent, optionsCurrentValues];
    }

    // Shows the popup and darkens the background
    function showPopup(){
        $(settings.darkenBackgroundSelector).show();
        $(settings.popupSelector).show();
    };

    // Hides the popup and lightens the background
    function hidePopup(){
        $(settings.darkenBackgroundSelector).hide();
        $(settings.popupSelector).hide();
    }

    // Puts focus on the first form element in the popup
    function focusFirstEl() {
        //$(popupSelector+" form").children(":first").focus();
        $(settings.popupSelector + " form :input:visible:enabled:first").focus();
    };

    // Default Settings
    $.fn.popup.defaults = {
        autoGeneratePopupForm: false,               // If true, the contents of the popup will be overwritten with a generated form inputs based on the data you click "edit" on.  If false, no content is overwritten.
        dataType: "data",                       // The name of the data type (Ex "Users", "Albums").  Used in the header of the popup

        // General Selectors
        darkenBackgroundSelector: "#darken-page",   // The selector to darken the page behind the popup
        contentSelector: "#content",                // The selector for the main content area

        // DOM Table Selectors
        tableHeaderRowSelector: ".heading",
        editButtonSelector: ".table .edit",
        addButtonSelector: ".table .heading .add",

        // Popup Selectors
        popupSelector: ".popup.edit",
        //popupContentSelector: this.popupSelector + " .content",
        popupHeaderSelector: this.popupSelector + " .header p",
        popupOriginalIdSelector: this.popupSelector + " #originalId",
        popupSubmitSelector: this.popupSelector + " .footer .submit",
        popupCancelSelector: this.popupSelector + " .cancel",

        // Utility options.  Don't change.
        isEdit: false,
        isAdd: false,
    };
    $.fn.popup.defaults.popupContentSelector = $.fn.popup.defaults.popupSelector + " .content";
    $.fn.popup.defaults.popupHeaderSelector = $.fn.popup.defaults.popupSelector + " .header p";
    $.fn.popup.defaults.popupOriginalIdSelector = $.fn.popup.defaults.popupSelector + " #originalId";
    $.fn.popup.defaults.popupSubmitSelector = $.fn.popup.defaults.popupSelector + " .footer .submit";
    $.fn.popup.defaults.popupCancelSelector = $.fn.popup.defaults.popupSelector + " .cancel";

}(jQuery));

我在頁面上這樣稱呼它：

 $("html").popup({
    autoGeneratePopupForm: true,
    dataType: "User"
 });

有任何想法嗎？ 提前致謝。

Answer 1

不知何故，我忽略了一個簡單的問題。

由於我的JS不在$(document).ready(function() {}); ，它會在遇到<script>標記后立即運行，這是在頁面上呈現DOM之前。

因此，JS試圖綁定到頁面上尚不存在的元素。

希望這對遇到這個問題的人有所幫助。 始終確保要處理的DOM實際上在頁面上。