单击列表项时不会调用 Javascript 函数

Question

我有一个使用 IndexedDb、JQuery 和 JQuery mobile 的简单应用程序。我有这个 showData() 函数来填充无序列表。该应用程序的所有页面都在一个 html 文件中。

function showData() {
    // clear the item list
    $('#itemList').html('');
    var output = '';
    var objectStore = db.transaction(dbTable).objectStore(dbTable);
    objectStore.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;

        if (cursor) {
            // generate the list items
            output += '<li>';
            output += '<a href="#details" onclick="displayObject(\'' + cursor.value.SSN + '\')">';
            output += '<h2>' + cursor.value.Name + '</h2>';
            output += '<p>' + cursor.value.Address + '</p>'; 
            output += '</a>';
            output += '<a href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop">Delete Entry</a>';
            output += '</li>';
            // add the list item to UL
            $('#itemList').append(output);
            // clear pervious item
            output = ''; 

            cursor.continue();

        } else {
            //
            $('#notice').append('<p>All Items Loaded Successfully!</p>');
        }
    };
}

列表项显示正常，当我单击列表项时，它应该导航到详细信息页面。当单击列表项时，应该调用一个名为 diaplayObject(id) 的函数，然后它使用 id 来获取数据并填充详细信息页面。这是函数

function displayObject(id) {
    console.log('In diaplayObject()');
    var objectStore = db.transaction(dbTable).objectStore(dbTable);
    objectStore.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;

        if (cursor) {
            if (cursor.value.SSN == id) {
                $('#name').html(cursor.value.Name);
                $('#address').html(cursor.value.Address);
                return;
            }
            cursor.continue();
        } else {
            $('#name').html('No DATA');
        }
    };
}

我的问题是当我点击链接时这个函数没有被调用。我在 Firefox 中使用了调试器，但制动点不会被击中。我不知道出了什么问题。我做错了什么。

生成的 HTML(列表项)

<ul id="itemList" data-inset="true" data-role="listview" data-filter="true" data-filter-placeholder="search" data-split-icon="delete" data-split-theme="a" data-theme="a">
            <li class="ui-li-has-alt ui-first-child">
                <a class="ui-btn" href="#details" onclick="displayObject('111')">
                    <h2>Kasun</h2>
                    <p>Imbulgoda</p>
                </a>
                <a title="Delete Entry" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" aria-expanded="false" aria-owns="deleteItem" aria-haspopup="true" href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"></a>
            </li>
            <li class="ui-li-has-alt">
                <a class="ui-btn" href="#details" onclick="displayObject('458')">
                    <h2>Gayan</h2>
                    <p>Gampaha</p>
                </a>
                <a title="Delete Entry" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" aria-expanded="false" aria-owns="deleteItem" aria-haspopup="true" href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"></a>
            </li>
            <li class="ui-li-has-alt">
                <a class="ui-btn" href="#details" onclick="displayObject('881')">
                <h2>Kasun</h2>
                <p>Gampaha</p>
            </a>
            <a title="Delete Entry" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" aria-expanded="false" aria-owns="deleteItem" aria-haspopup="true" href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"></a>
            </li>
        </ul>

Answer 1

displayObject function is inside the function associated with window.onload.

这就是问题所在。从 onXyz 属性调用的函数必须是全局的。这是不使用 onXyz 属性的几个原因之一。

这是您的代码的模型，其中 displayObject 作为全局变量 - 它可以工作:http://jsbin.com/nakak/1

这是一个将 displayObject 封装在 window.onload 处理程序中的模型 - 它失败并显示 Uncaught ReferenceError: displayObject is not Defined: http://jsbin.com/nakak/2

我将使用 data-* 属性和委托(delegate)处理程序，处理程序从元素获取 id。看起来像这样:http://jsbin.com/nakak/3

将 data-* 属性置于:

output += '<a href="#details" data-id="' + cursor.value.SSN + '">';

将处理程序绑定(bind)到#itemList:

$("#itemList").on("click", "a[data-id]", displayObject);

然后在displayObject中，获取id:

function displayObject() {
    var id = $(this).attr("data-id");
    // ...
}

或者，如果您在其他地方使用 displayObject 并且不想更改它，则可以像这样绑定(bind)处理程序:

$("#itemList").on("click", "a[data-id]", function() {
    displayObject($(this).attr("data-id"));
});