单击列表项时未调用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函数位于与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);

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

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