JQuery how to click div inside li to update another div
I have a ul i am appending li's with two div's through JavaScript to it, shown as below
c_list = $('.encounter_creatures_list > ul')
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM creatures;',
[],
function (transaction, result) {
v开发者_StackOverflowar creature_array = new Array();
for (i=0; i < result.rows.length; i++){
var row = result.rows.item(i)
li = $("li[key='" + row.id + "']")
if(li.length > 0) {
// $('#name', li).html(encounter.name)
} else {
creature_array.push(row)
var counter = 0
li = $("<li key='"+ row.id + "' class='list_"+ row.id + "'>"+ row.name + "<div class='plus_"+ row.id + "'>+</div> <div class='counter_"+ row.id + "'>"+ counter +"</div></li>")
li.css({'border': '1px solid #999999', 'color': '#222222', 'display': 'block', 'font-size': '17px', 'font-weight': 'bold', 'margin-bottom': '-0.5px', 'padding': '12px 10px', 'text-decoration': 'none'})
c_list.append(li)
// alert($(".counter_"+ row.id + "", li).text())
// $(".plus_"+ row.id + "", li).click(function(event) {
// $(".counter_"+ row.id + "", li).text(counter + 1)
// event.preventDefault();
// })
}
}
})
})
I want to do the part which i have commented, i.e. clicking one div to update another inside li.
Add another class to the div that is static. Than add this to your onload event. All elements with the class .classname will have the onclick functionality.
$(".classname").live("click", function() {
var rowid = $(this).attr("key");
alert($(".counter_"+ rowid, li).text());
$(".counter_"+ rowid, li).text(counter + 1);
});
One side note. Your code is a bit messy. You should try to refactor it a bit.
精彩评论