【问题标题】:Javascript Print <li> with data-name带有数据名称的 Javascript 打印 <li>
【发布时间】:2017-04-10 20:14:14
【问题描述】:

我正在尝试使用 JavaScript 生成 JQuery ListView,一旦我单击 listview 项,它就会显示一条警告消息。

在我在 Stack Overflow 中找到的演示中,它运行良好。

一旦我尝试将我的代码与之集成,它就不再起作用了。我在列表视图中生成数据名称的方式是否正确?

我的小提琴示例:http://jsfiddle.net/TLGY7/416/

$('#mylistview ul').children('li').bind('click', function(e) {
    var item = $(this).attr('data-name')
    alert('Selected Name=' + item );
});

function view() { 
    if (db==null) {
        alert('Error: Database is null.');
        return;
    }
    $('#listData').empty();
    db.executeSql(
        'SELECT `id`, `activityname`, `location`, `sdate`, `stime`, `reporter` FROM `record` ORDER BY `id` ASC',
        [],
        function(resultset) { 
            var length = resultset.rows.length;
            for(var i=0; i<length; i++) {
                $('#listData').append('<li class="activitylist" data-name='+resultset.rows.item(i).id+'><a href="#pageDetail" class="anchor">'+resultset.rows.item(i).id+'.'+stringconverter(resultset.rows.item(i).activityname)+'</a></li>');
            }
            $("#listData").listview( "refresh" );
        },
        function(error) { 
            alert('Error: '+error.message);
        }
    );
}

【问题讨论】:

  • alert('Selected Name=' + item ); 输出是否可能是Selected Name=Object?如果要提醒 html 代码,则必须获取 item[0].outerHTML。在 console.log 中你可以使用 jquery 对象
  • @TypedSource 是否有其他方法可以帮助我携带或存储 ID 作为来自数据库的未来呼叫数据?
  • jsfiddle.net/TLGY7/12 @TypedSource 这是最初的小提琴,你可能会更了解我在这里想要做什么
  • 您能发布一个示例结果集对象吗?我无法连接到您的数据库
  • 实际结果会打印像“1.Testing”这样的样本。只是简单的显示对象,我的目标是获取
  • 中的数据名称。由于我在 data-name 中设置表主键,以便我可以将该值用作其他数据调用目的

标签: javascript jquery sqlite listview jquery-mobile


【解决方案1】:
var linkElement = $('<a href="#pageDetail" class="anchor">').text(resultset.rows.item(i).id + '.' + stringconverter(resultset.rows.item(i).activityname));
var listElement = $('<li class="activitylist">').attr('data-name', resultset.rows.item(i).id)).append(linkElement);
$('#listData').append(listElement)

append 方法需要 JQuery 节点元素,而不是文本

你也可以在你的 '' 语句周围加上一个 $() 。节点构建本身在第一个视图中看起来不错。

【讨论】:

  • 感谢您的回复,我尝试了您的代码,它完全停止了功能。
  • 是否有其他方法可以帮助我携带或存储 ID 作为来自数据库的未来呼叫数据?
【解决方案2】:

如果你是动态添加列表项,你应该使用event delegation来处理点击事件:

$('#mylistview ul').on("click", "li", function(){
    var item = $(this).data('name')
    alert('Selected Name = ' + item );
});

以他的方式,当您设置点击处理程序时,列表项不必存在。

更新FIDDLE

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签