jQuery variable is not being populated before ajax function.

问题

Please take a look at my [fiddle][1].

I am trying to get all the tables with a selected checkbox contained in a given div. The tables will then be sent as a variable $content to my ajax function before being sent to my mail function.

However, when I click the send button, I am getting the error - content is not defined.

 jQuery('#search-query-send').click(function(){                     

                jQuery('.selectthis input:checked').each(function() {
                    var content = jQuery(this).parents('div.apartment-entry-container').html();
                    var email = jQuery('#email').val();
                });


                jQuery.ajax({
                    url:"http://www.greenmonkeypublicrelations.com/scpads/wp-admin/admin-ajax.php",
                    type:'POST',
                    data:'action=apartmentsearchemail&email=' + email + '&content=' + content,                                    
                    success:function(result){
                    //got it back, now assign it to its fields.                     
                        alert('Your message has been sent.');
                        console.log(result);             
                    }   
                }); 
            }); 

回答1:

The variable content here is a local variable, and only contains the current table's HTML. If you want to send them together, you will have to append/join the values using +=:

jQuery('#search-query-send').click(function() {

  var content = '', email = '';

  jQuery('.selectthis input:checked').each(function() {
    content += jQuery(this).parents('div.apartment-entry-container').html();
    var email += jQuery('#email').val();
  });

  jQuery.ajax({
    url: "http://www.greenmonkeypublicrelations.com/scpads/wp-admin/admin-ajax.php",
    type: 'POST',
    data: 'action=apartmentsearchemail&email=' + email + '&content=' + content,
    success: function(result) {
      //got it back, now assign it to its fields.                     
      alert('Your message has been sent.');
      console.log(result);
    }
  });
});

However, sending HTML code via GET method is not advisable. Could you try to do a POST instead?

回答2:

You have declared those as local to the .each() callback function, so they don't exists in the scope of the click callback.

jQuery('#search-query-send').click(function () {
    var content = '',
        email = '';
    jQuery('.selectthis input:checked').each(function () {
        content = jQuery(this).parents('div.apartment-entry-container').html();
        email = jQuery('#email').val();
    });


    jQuery.ajax({
        url: "http://www.greenmonkeypublicrelations.com/scpads/wp-admin/admin-ajax.php",
        type: 'POST',
        data: 'action=apartmentsearchemail&email=' + email + '&content=' + content,
        success: function (result) {
            //got it back, now assign it to its fields.                     
            alert('Your message has been sent.');
            console.log(result);
        }
    });
});

回答3:

This solved my problem. Didnt have to use the GET method. Ive stuck with the POST method as I will eventually nee dto record these emails.

wp_mail($to, stripslashes($subject), stripslashes($message), $headers);

来源：https://stackoverflow.com/questions/31291683/jquery-variable-is-not-being-populated-before-ajax-function