有一个jquery对话框(#dialog-message1),其中附加了表(tableINFO)。 表格的每一行在最后一栏中显示了一些有关产品的信息,其中包含图片链接。 我想创建一个单击事件,其中将采取一些措施,即删除表行和(potrawy1Engine.php)脚本调用。 我尝试创建(.confirmation2),但无法正常工作-而是遵循链接。
请问有人可以帮我和有关js脚本的建议吗?
我想做的是删除表tableINFO中的一行,单击该链接后单击该链接。
.confirmation1和.confirmation可以正常工作,只有.confirmation2不起作用。 也许问题在于表和链接是在jquery中动态创建的?
这是js:
$("#dialog-message").hide();
$('.confirmation').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
window.location.href = lnk;
},
Anuluj: function() {
$(this).dialog("close");
}
}
});
});
$("#dialog-message1").hide();
$('.confirmation1').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
$( "#dialog-message1" ).hide();
$( "#dialog-message1 table" ).remove();
$( "#dialog-message1 #labelINFO" ).remove();
$("#dialog-message1").append("<table id='tableINFO'> </table>");
$("#dialog-message1 table").append("<tr><th width='350px' >Nazwa produktu</th><th width='70px'>Waga (g)</th><th width='100px'>Kalorie (Kcal)</th> <th width='80px'>Białko (g)</th> <th width='90px'>Tłuszcze (g)</th><th width='120px'>Węglowodany (g)</th><th width='30px'> </th> </tr>");
$.ajax({
method: "POST",
url: "potrawyINFOEngine.php",
data: {"nazwa": product_name},
}).done(function( data ) {
var result = $.parseJSON(data);
var len = result.length;
for(var i=0; i<len; i++){
var T_nazwaproduktu = result[i].produkt;
var T_waga = result[i].waga;
var T_kalorie = result[i].kalorie;
var T_bialko = result[i].bialko;
var T_tluszcze = result[i].tluszcze;
var T_weglowodany = result[i].weglowodany;
var tr_str = "<tr>" +
"<td align='left'>" + T_nazwaproduktu + "</td>" +
"<td align='right'>" + T_waga + "</td>" +
"<td align='right'>" + T_kalorie + "</td>" +
"<td align='right'>" + T_bialko + "</td>" +
"<td align='right'>" + T_tluszcze + "</td>" +
"<td align='right'>" + T_weglowodany + "</td>" +
"<td align='center'>" +
"<a href='usunProduktPotrawa.php?nazwaPotrawy=" + product_name + "&nazwaProduktu=" + T_nazwaproduktu + "' title='Usuń produkt' class='confirmation2'><img src='pictures/cross16.jpg' width='10' height='10' style='margin: 0px 0px' /></a>" ;
"</td>" +
"</tr>";
$("#dialog-message1 table").append(tr_str);
}
console.log(data);
});
$.ajax({
method: "POST",
url: "potrawyINFOOpisEngine.php",
data: {"nazwa": product_name},
}).done(function( data ) {
var result = $.parseJSON(data);
console.log(result);
$("#dialog-message1").append("<label id='labelINFO'>" + result + "</label>");
$( "#dialog-message1" ).show();
});
$("#dialog-message1").dialog({
height: "auto",
width: 950,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
$( "#dialog-message1 table" ).remove();
$( "#dialog-message1 #labelINFO" ).remove();
}
}
});
});
$("#dialog-message2").hide();
$('.confirmation2').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('href');
var product_name = $(this).parents("tr").find("td").first().html();
$( "#dialog-message2" ).hide();
$.ajax({
method: "POST",
url: "potrawy1Engine.php",
data: {"nazwa": product_name},
}).done(function( data ) {
var result = $.parseJSON(data);
console.log(result);
$( "#dialog-message2" ).show();
});
$("#dialog-message2").dialog({
height: "auto",
width: 450,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
HTML部分在这里:
<div id="dialog-message" title="Usuwanie potrawy">
<p>
<span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
</p>
<p>
Naciśnij OK aby kontynuować.
</p>
</div>
<div id="dialog-message1" title="Składniki i opis potrawy">
</div>
<div id="dialog-message2" title="Test">
</div>
预先感谢您的帮助。