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函数位于与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-*属性和委托处理程序，处理程序从元素中获取id。看起来像这样：http://jsbin.com/nakak/3

将data-*属性设置为：

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

将处理程序绑定到#itemList：

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

然后在displayObject中，获取id：

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

或者如果您在其他地方使用displayObject，所以不想更改它，您可以这样绑定处理程序：

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

Answer 2

为什么不从HTML属性中删除函数调用，而是为类或ID添加事件侦听器？像这样：

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

//event listener which will call the function

var URLclick = document.querySelectorAll('displayObjectLink');

URLclick.addEventLisenter('click', displayObject);

然后在tour displayObject中，您可以通过检索元素的ID来访问cursor.value.SSN：

var SSN = event.target.id; //you must pass in the event as the first argument of the function

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

2 个答案: