如何通过函数调用向页面添加新元素，并将事件处理程序附加到它们，而不在函数内指定它们？

Question

所以我有一个应用程序。它是用 jQuery（UI 和移动）编写的。

我有这个页面结构：

主页：

    <!-- Main Page -->
    <div data-role="page" id="home">
        <header data-role="header" data-theme="a">
            <h1>Running Tracker</h1>
        </header>
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="#add" data-transition="fade" data-icon="plus">Add Run</a>
                </li>
            </ul>
        </div>
        <div data-role="content">
            <h3>Welcome to the RunningTracker App</h3>
            <p>
                With this app you can track your running, jogging or walking.
            </p>

            <h3>Your Latest Runs:</h3>

            <ul id="stats" class="current"  data-role="listview" data-filter="true" data-filter-placeholder="Filter runs by date or distance." data-inset="true" ></ul>
            <br/>
            <button id="clearRuns" onclick="return confirm('Are You Sure?')">
                Clear Data
            </button>
        </div>
        <footer data-role="footer">
            <h4>RunningTracker &copy; 2015 GZ</h4>
        </footer>
    </div>

添加新条目页面：

        <!-- Add Run Page -->
        <div data-role="page" id="add">
            <header data-role="header" data-theme="a">
                <h1>Running Tracker</h1>
            </header>
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#home" data-transition="fade" data-icon="home">Home</a>
                    </li>
                </ul>
            </div>
            <div data-role="content">
                <h3>Add Run</h3>
                <form id="addForm">
                    <label for="km">Enter Kilometres:</label>
                    <input type="number" id="addKms" required>
                    <label for="km">Enter Date:</label>
                    <input type="date" data-role="date" class="date" id="addDate" data-inline="true" required>
                    <button id="submitAdd" class="ui-btn ui-corner-all">
                        Add Run
                    </button>
                </form>
            </div>
            <footer data-role="footer">
                <h4>RunningTracker &copy; 2015 GZ</h4>
            </footer>
        </div>

而且我有一个添加新运行的功能，所以当您添加新条目时，应用程序使用edit 方法将当前的home 页面替换为edit 页面。

在该页面上，我将所有需要的数据输入表单并使用此功能提交：

addRun:

function addRun() {
            /*
             * Data Manipulation Here
             */

            //Redirect back to Home page after form is submitted
            $("body").pagecontainer("change", "#home", {
                transition : "fade",
                reverse : true
            });

            //Here I hide all Original Entries that are currently displayed(they have class "original"
            $('.original').hide();
            //Here I display all the entries again, including the new ones
            showRuns();
            //Here I add EventHandlers again, to newly created Elements
        }
    }

如您所见，如果我想在元素上保留所有需要的处理程序，我必须在我执行的每个函数中复制相同的操作。

简而言之，我为什么要这样做：

1) 我像这样加载当前视图：

    $(document).on("pagecreate", "#home", function() {
        //Showing All Current Entries
        showRuns();
        //Attaching Event Handlers
        $('#submitAdd').on('tap', addRun);
        $('#submitEdit').on('tap', editRun);
        $('.editLink').on('tap', setCurrent);
        $('.deleteLink').on('tap', function() {
            var confirmation = confirm("Are you sure?");
            if (confirmation) {
                setCurrent.call(this);
                deleteRun.call(this);
            }
        });
        $('#clearRuns').on('tap', clearAll);

        //Declaring all functions that I use in eventHandlers below

});

2) 然后我切换到#add 页面添加新条目。

3) 我添加了新条目并切换回主页。如果我没有在addRuns 函数中调用showRuns 函数就这样做了，我将看不到我刚刚添加的新条目，我将不得不重新加载页面才能看到它。

4) 如果我要在 addRuns 函数中调用 showRuns 函数，我会看到重复的条目，因为函数将在每次 addRun 调用时再次调用。

5) 要在添加新条目后查看新条目，我必须从主页中删除所有其他条目，这些条目具有 current 类，然后我调用 showRuns 函数将所有条目再次添加到主页， 但是它们不会有任何事件处理程序，因为它们是在页面加载后创建的。

6) 所以现在我必须再次添加所有处理程序。

我觉得必须有更好的方法来做我想做的事 - 向页面添加新元素，而无需执行我上面描述的所有步骤。

我尝试过像这样使用 page-container 重新加载它：

$("body").pagecontainer("change", "#home", {
                transition : "fade",
                reload : true
            });

但如果我这样做，它没有任何效果。

这里是现场演示：http://runningtracker.herokuapp.com/

Answer 1

您是否尝试过使用事件委托：http://learn.jquery.com/events/event-delegation/

这使您可以将事件放在容器上，然后将其委托给容器内的元素，无论它们在设计时是否存在。

改变

    $('.editLink').on('tap', setCurrent);
    $('.deleteLink').on('tap', function() {...

到

    $(document).on('tap','.editLink', setCurrent);
    $(document).on('tap','.deleteLink', function() {...