jQuery $ .post在添加功能（响应）时不起作用

Question

我有以下js函数

function remove() {
    jQuery(document).ready(function() {
        jQuery("button").click(function(e) {
            var buttonHnd = jQuery(this);
            jQuery.post("script.php", {
            nume_client: jQuery("#nume_client").val()
            adresa: jQuery("#adresa").val(),
            comanda: jQuery("#comanda").val(),
            locatie: jQuery("#locatie").val(),
            istoric: jQuery("#istoric").val(),
            observatii: jQuery("#observatii").val()
        }, function(response) {
            alert("ok")
        },
        function(data) {
            buttonHnd.closest('tr').remove();
        });
    });
});
}

当我删除功能（响应）的脚本工作，它删除该行。 但我也想将其添加到数据库中。 在script.php文件中，我只有带有响应头的mysql查询。

第二个问题是我的“删除”按钮仅在第二次单击时起作用，而仅在所有行都被除去之后才起作用。

谁能帮助解决数据库问题？

您可以在此处找到script.php文件

编辑

该帖子缺少一行。 该文件包含正确的代码。

Answer 1

更新 ：

从您最近的编辑添加到缺少的代码行开始，下面的原始答案不再适用。 仍然存在语法错误（ nume_client: jQuery("#nume_client").val()之后缺少逗号nume_client: jQuery("#nume_client").val() ），但是我假设这是一个复制粘贴错误。 加逗号使它在语法上有效。

您的代码在做什么，每次调用remove ，它都要求jQuery在文档“就绪”时运行一个函数。 只要您在文档准备好之前从未调用过remove （或只这样做一次）就可以了，因为在此之后jQuery会立即调用该函数。

该功能的作用是在页面上的每个button元素上设置点击处理程序。 然后，（如果你再次称呼它）也建立了再处理，所以现在有每两个处理程序button在页面上，每个将尝试做同样的事情在单击按钮时。 如果您第三次调用它，则页面上的每个button都将具有三个处理程序，当单击任何按钮时，它们都将尝试执行相同的操作。

一旦你所谓的remove至少一次，所有button的页面上旨意，试图做一个回应点击post和（成功）删除最近的含tr 。

我认为这是您的意思：

jQuery(document).ready(function() {
    jQuery("button").click(function(e) {
        var buttonHnd = jQuery(this);
        jQuery.post("script.php",
            {
                nume_client: jQuery("#nume_client").val(),
                adresa:      jQuery("#adresa").val(),
                comanda:     jQuery("#comanda").val(),
                locatie:     jQuery("#locatie").val(),
                istoric:     jQuery("#istoric").val(),
                observatii:  jQuery("#observatii").val()
            },
            function(data) {
                buttonHnd.closest('tr').remove();
            }
        );
    });
});

变化：

1. 完全删除功能remove ，以便该代码在页面上遇到后立即执行，设置要在DOM准备就绪时调用的函数。 确保在包含jQuery的script标签之后有此代码。 您将需要修改调用remove的代码以不调用它。
2. 删除第二个功能，剩下第三个。 jQuery.post的签名接受URL，要发布的数据，函数以及可选的数据类型字符串。 您正在传递最后一个参数的函数，据我所知，该参数不受支持（据我所知），并且几乎可以肯定这不是您想要执行的操作。 :-)

这仍然会将其连接到页面上的每个按钮，您可能不希望这样做。 相反，您可能希望使选择器更加具体（例如，使用ID，使用结构选择器，使用类等；使用jQuery，您可以选择多种方法来缩小选择范围）。

尽管这将起作用，但也会将悬空的事件处理程序留在button元素上，这些元素将在删除tr被删除。 为了处理动态表，您可能需要使用delegate或live 。 delegate将事件挂接到容器元素上，但仅在事件是由与您提供给它的选择器匹配的元素生成时才触发代码。 只有一个事件处理程序，但其作用就像在与选择器匹配的元素上有一个处理程序一样。 live基本上是使用文档根目录作为容器的delegate 。

在你的情况，我可能会使用delegate的上table元素与线沿线的一个选择button[name="remove"] HTML示例：

<table id='theTable'>
<tbody>
  <tr>
    <td>Blah blah blah</td>
    <td><button name='remove'>Remove</button></td>
  </tr>
  <tr>
    <td>Blah blah blah</td>
    <td><button name='remove'>Remove</button></td>
  </tr>
</tbody>
</table>

使用该示例HTML，然后：

jQuery(document).ready(function() {
    jQuery("#theTable").delegate('button[name="remove"]', 'click', function(e) {
        var buttonHnd = jQuery(this);
        jQuery.post("script.php",
            {
                nume_client: jQuery("#nume_client").val(),
                adresa:      jQuery("#adresa").val(),
                comanda:     jQuery("#comanda").val(),
                locatie:     jQuery("#locatie").val(),
                istoric:     jQuery("#istoric").val(),
                observatii:  jQuery("#observatii").val()
            },
            function(data) {
                buttonHnd.closest('tr').remove();
            }
        );
    });
});

您不必使用name ，只要您可以确定应该以这种方式响应单击的button元素即可。 如果表中的所有 button元素都是删除按钮，则只需使用jQuery('#theTable').delegate('button', 'click', function...

除了更新 ：

您要求我看一下script.php文件。 抱歉，我不是一个PHP头，但是FWIW，脚本的内容是：

$sql="INSERT INTO `baza`.`tabel` (`1`, `2`, `3`) VALUES ('".$arr['adresa']."', '".$arr['nume_client']."', '".$arr['comanda']."')";

观察结果：

1. 您没有做任何事情来转义$arr['adresa']等中的值。不这样做有两个大问题：

   1. 如果（例如） $arr['adresa']或其他任何字段中有一个' ，查询将中断。

   2. 您将对SQL注入攻击敞开大门 。 阅读有关SQL注入的php.net页以及如何避免它。

2. 不要在列baza.tabel 真有名称1 ， 2 ，和3 ？ 那是一个非常奇怪的表结构。 通常，我希望看到名称（例如）为nume_client ， adresa和comanda 。

---

原始答案 ：

该代码中存在许多问题：

function remove() {

    jQuery(document).ready(function() {

        jQuery("button").click(function(e) {

            var buttonHnd = jQuery(this);

            nume_client: jQuery("#nume_client").val()
         // ^-- Here you're creating a label, I suspect you were trying to create a property

            adresa: jQuery("#adresa").val(),
         // ^-- And here

            comanda: jQuery("#comanda").val(),
         // ^-- And here, I expect this one's actually a syntax error,
         //     check your browser's JavaScript console for errors

            locatie: jQuery("#locatie").val(),
         // ^-- And here

            istoric: jQuery("#istoric").val(),
         // ^-- And here
            observatii: jQuery("#observatii").val()
         // ^-- And here
        }, function(response) { // <== Here you're passing a second function into `click`
            alert("ok")
        },

        function(data) { // <=== Here you're passing a *third* function into `click`
            buttonHnd.closest('tr').remove();
        });
    });
});
}

在猜测 ，我会说，你可能想是这样的：

function remove() {

    jQuery(document).ready(function() {

        jQuery("button").click(function(e) {

            var buttonHnd = jQuery(this);

            jQuery.post(some_url_here,
                {
                    nume_client: jQuery("#nume_client").val(),
                    adresa: jQuery("#adresa").val(),
                    comanda: jQuery("#comanda").val(),
                    locatie: jQuery("#locatie").val(),
                    istoric: jQuery("#istoric").val(),
                    observatii: jQuery("#observatii").val()
                },
                function(response) {
                    buttonHnd.closest('tr').remove();
                }
            );
        });
    });
}

...但是您不希望所有内容都包含在该remove功能中，我很确定。

Answer 2

由于格式不正确，这可能会破坏您的所有脚本（可能）

            nume_client: jQuery("#nume_client").val()
            adresa: jQuery("#adresa").val(),
            comanda: jQuery("#comanda").val(),
            locatie: jQuery("#locatie").val(),
            istoric: jQuery("#istoric").val(),
            observatii: jQuery("#observatii").val()

它没有用，就像你应该那样做，或者至少是我认为你正在尝试做的。

var obj = {nume_client: jQuery("#nume_client").val()
            adresa: jQuery("#adresa").val(),
            comanda: jQuery("#comanda").val(),
            locatie: jQuery("#locatie").val(),
            istoric: jQuery("#istoric").val(),
            observatii: jQuery("#observatii").val()
};

无论如何编辑，我认为您想要做的是某种形式的ajax

 jQuery("button").click(function(e) {
        var buttonHnd = jQuery(this);
        var data =  {
          nume_client: jQuery("#nume_client").val()
          adresa: jQuery("#adresa").val(),
          comanda: jQuery("#comanda").val(),
          locatie: jQuery("#locatie").val(),
          istoric: jQuery("#istoric").val(),
          observatii: jQuery("#observatii").val()
       };
       $.ajax({
             url: 'script.php',
             type: 'post',
             data:data,
             success: function (response){
                   alert('ok')
             },
             error:function (){
                  //in case you get a 500,404 error etcc 
             }
       });
    },
    function(data) {
        buttonHnd.closest('tr').remove();
    });