停止在ajax创建的输入上发生click() [英] stop click() from happening on a ajax created input

问题描述

对不起，如果已经回答了.我看着并寻找答案，但没有任何效果.

我想做的是，如果用户想更改其订单，则可以使确认"页面能够即时更新.

在使用真实"信息之前，我现在正在使用测试项目来使其正常工作.

<div id="testing_editing">meat logs</div>

jQuery:

$("testing_editing").click(function(e){
    var testhtml = $(this).html();
    var meatseafood = '<?php echo $meatseafood; ?>';
    $.post('edit_order.php', {'itemtoedit':testhtml,'meatseafood':meatseafood}, function(data) {
    $("#testing_editing").html(data);
    });
});

edit_order.php:

include ("includes.php");
// connection to SQL

$item_to_edit = test_input($_POST['itemtoedit']);
$meatseafood = test_input($_POST['meatseafood']);

echo "<div id=\"child_toedit\"><input id=\"toedit\" type=\"text\" placeholder=\"$item_to_edit\"       size=20></div>";

我尝试添加:

$("#child_toedit").click(function(e){
    e.stopPropagation();
});

基本上发生的是，我单击包含信息的div，它用文本输入替换了自身，但是当我单击文本输入以更改值时，它将再次进行ajax调用并填充为用于创建输入的代码，以便占位符变为div id = \"child_toedit \"输入id = \"toedit \" type = \"text \"占位符= \"$ item_to_edit \" size = 20>/div而且我永远无法在框中键入内容，因为每次我单击该框时，它都会像无限循环一样重新填充自身，只需要单击它即可循环循环

我还没有完成代码，因为我被困在这里，但是如果您知道如何制作代码，以便div内具有click()函数的输入框不会激活该函数，它将允许我继续找出其他方法.

我要如何完成它，在输入框的右边有一个复选框，当您选中它时，它将再次调用ajax并处理新数据并返回新的信息，而没有输出输入框.至少那是我的主意.我不确定它是否会工作.

目前我没有一个可行的示例供您观看.

对不起，如果我没有提供足够的代码或信息.

我只需要知道如何制作它，这样我就可以在div中的元素内单击，而不必激活div的click()函数.我以为它与stopPropagation有关，但是我无法通过在此站点和其他站点上看到的示例来弄清楚.

谢谢您的帮助.

顺便说一句，我在这方面非常业余，因此，如果有更好的方法可以即时更新数据，我将为您提供帮助.我已经做了很多研究，但是我找不到任何答案，因此我正在根据自己认为应该为实现自己的目标而做的工作进行补充.这都是从我头上写的代码，而不是从别的地方复制过来的.

谢谢， 德里克·康隆

解决方案

我最终得到的答案是:

If (e.target === this) {} 

在初始代码后

环绕我的代码

$("#testing_editing").click(function(e){

谢谢您的帮助.

Sorry if this is answered already. I looked and looked for an answer but nothing is working.

What i'm trying to do is make a "confirmation" page be able to be updated on the fly if the user wanted to change their order.

I'm using testing items at the moment to get it working before I use the "real" information.

<div id="testing_editing">meat logs</div>

Jquery:

$("testing_editing").click(function(e){
    var testhtml = $(this).html();
    var meatseafood = '<?php echo $meatseafood; ?>';
    $.post('edit_order.php', {'itemtoedit':testhtml,'meatseafood':meatseafood}, function(data) {
    $("#testing_editing").html(data);
    });
});

edit_order.php:

include ("includes.php");
// connection to SQL

$item_to_edit = test_input($_POST['itemtoedit']);
$meatseafood = test_input($_POST['meatseafood']);

echo "<div id=\"child_toedit\"><input id=\"toedit\" type=\"text\" placeholder=\"$item_to_edit\"       size=20></div>";

I tried to add:

$("#child_toedit").click(function(e){
    e.stopPropagation();
});

Basically what happens is, i click the div with the info in it, and it replaces itself with the text input, but when i click in the text input to change the value, it makes the ajax call again and populates it with the code that is used to create the input so the placeholder becomes div id=\"child_toedit\" input id=\"toedit\" type=\"text\" placeholder=\"$item_to_edit\" size=20>/div and i'm never able to type in the box because everytime i click on the box it repopulates itself kinda like a infinite loop only you have to click it to cycle the loop

I haven't finished the code yet because i'm stuck here, but if you know how to make it so that a input box inside the div that has the click() function wont activate that function, it will allow me to continue on figuring out the rest of how to do this.

How i'm going to finish it is have a check box to the right of the input box, and when you check it, its going to call the ajax again and process the new data and return the new info w/out a input box. at least that's my idea. i'm not sure if it will work or not.

I don't have a working example at the moment for you to see it live.

Sorry if i didn't provide enough code or info.

I just need to know how to make it so i can click inside the elements in the div and not activate the div's click() function. I'm assuming it has to do with stopPropagation but i can't figure it out with the examples i've seen on this site and others.

Thank you for any help.

by the way, i'm extremely amateur when it comes to this, so if there is a better way i should be doing this to update data on the fly, i'd love any help. i've done a bunch of research but i cant find any answers so i'm kinda making it up as i go based on what i think it should be doing to achieve my goal. this is all code written from my head, not copied from something else.

Thanks, Derek Conlon

解决方案

The answer I ended up with was:

If (e.target === this) {} 

wrapping around my code after the initial

$("#testing_editing").click(function(e){

Thank you for all your help.

这篇关于停止在ajax创建的输入上发生click()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！