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

Question

I have the following js function

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();
        });
    });
});
}

When i remove function(response) the script works, it removes the row. but i also want to add it to the database. In the script.php file i have only the mysql query with response headers.

The second issue is that my remove button works only on the second click but only after all rows are removed.

Can anyone help with the database problem?

You can find here the script.php file

EDIT

there was a line missing from this post. the file contains the correct code.

Answer 1

Update :

As of your recent edit adding in the missing line of code, the original answer below no longer applies. There's still a syntax error (missing comma after nume_client: jQuery("#nume_client").val() ), but I'll assume that's a copy-and-paste error. Adding in the comma makes it syntactically valid.

What your code is doing is, every single time you call remove , it's asking jQuery to run a function when the document is "ready". That'll mostly be fine as long as you never call remove before the document is ready (or only do so once), because afterward jQuery will just call the function immediately.

What that function does is set up a click handler on every button element on your page. And then (if you call it again) it sets up the handler again , so now there are two handlers on every button on the page, each of which will try to do the same thing when the button is clicked. If you call it a third time, you'll have three handlers on every button on the page, all trying to do the same thing when any button is clicked.

Once you've called remove at least once, all button s on the page will respond to a click by trying to do the post and (on success) remove the nearest containing tr .

Here's what I think you mean to do:

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();
            }
        );
    });
});

Changes:

1. Completely remove the function remove , so this code executes as soon as it's encountered on the page, setting up the function to be called when the DOM is ready. Make sure that you have this code after the script tag that includes jQuery. And you'll want to modify the code that was calling remove to not call it.
2. Remove the second function, leaving the third. The signature for jQuery.post accepts a URL, the data to post, a function, and optionally a data type string. You were passing a function for the last parameter, which isn't (as far as I know) supported, and almost certainly wasn't what you wanted to do. :-)

That will still hook this up to every button on the page, which you probably don't want. Instead, you probably want to make that selectors more specific (eg, using an ID, use a structural selector, use a class, etc.; with jQuery you have lots of choices for how to narrow that down).

Although that will work, it will also leave dangling event handlers on the button elements that get removed when the tr is removed. For dealing with dynamic tables, you probably want to use delegate or live . delegate hooks the event on a container element, but only fires your code if the event was generated by an element matching a selector you give it. There's only one event handler, but it acts a lot like there's a handler on the elements that match the selector. live is basically delegate using the document root as the container.

In your case, I'd probably use delegate on the table element with a selector along the lines of button[name="remove"] . Example 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>

With that example HTML, then:

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();
            }
        );
    });
});

You don't have to use name , so long as you can identify which button elements should respond to the click in this way. If all of the button elements in the table are remove buttons, just use jQuery('#theTable').delegate('button', 'click', function... .

Addition to the update :

You asked me to take a look at the script.php file. Sorry, I'm not much of a PHP-head, but FWIW, the meat of the script is:

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

Observations:

1. You're not doing anything to escape the values in $arr['adresa'] , etc. There are two big problems with not doing that:

   1. The query will break if (for instance) $arr['adresa'] or any of the other fields has a ' in it.

   2. You're leaving yourself wide open to SQL injection attacks . Read the php.net page on SQL injection and how to avoid it.

2. Do the columns in baza.tabel really have the names 1 , 2 , and 3 ? That's a very strange table structure. Normally I'd expect to see columns with names like (for instance) nume_client , adresa , and comanda .

---

Original answer :

You have a number of problems in that code:

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();
        });
    });
});
}

At a guess , I'd say you probably want something like this:

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();
                }
            );
        });
    });
}

...but you don't want it all wrapped up in that remove function, I'm pretty sure.

Answer 2

This will break all your scripts (possibly) because is not formatted properly

            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()

its useless like that u should do it like so or atleast thats what I think you are trying to do.

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()
};

EDIT anyways I think what you are trying to do is an ajax of some kind

 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();
    });