jQuery function is not being called onclick

Question

I have a jQuery function that is triggered when a button (generated via php) is clicked, the same function is working for me on a link that is created with php as well, but for some reason this one isn't even displaying a error, I checked in firebug and it seems the functions ins't being called.

I have the script on the bottom of my page:

<script src="js/estadoLabs.js"></script>  on the bottom of my index page, so it should be working.

The function itself is this one:

$(".btnEliminar").click(function() {
  var idAttr = $(this).attr('id');
  var id = parseInt(idAttr.substring(12));

  var request = $.ajax({
    url: "includes/functionsLabs.php",
    type: "post",
    data: {

    'call': 'displayInfoLabs',
    'pId':id},

    dataType: 'html',

  success: function(response){
    $('#info').html(response);
    }
  });
});

I am quite sure the php function isn't to blame because running the $query on SQL makes the change to the table I want. Just in case this is a snippet of the html generated code that has the buttons (they are successfully being displayed).

<input type = "button" value = "Eliminar"  class= "btnEliminar" id = "btnEliminar-'.$row['idlab'].'" />

I went over it quite a few times but I didn't find any glaring erros, any help would be very appreciated. Thanks a lot in advance.

EDIT: PHP

Basically thanks to PollyGreek and Rafael the jQuery works, as now when clicking the button it shows me:

Warning: mysql_fetch_assoc() expects parameter 1 to be resource, null given in C:\wamp\www\Proyecto\includes\functionsLabs.php on line 179. Line 179 in question is...

function labStatusEliminar(){

if(isset($_POST['pId'])){

    $idEliminar = $_POST['pId'];

    $msjE = eliminar($idEliminar);

    while($row = mysql_fetch_assoc($msjE)){  //<--LINE 179
        echo 
             '<p>El laboratorio: '.$row['idlab'].' ha sido eliminado de la lista</p>';
     }
    }
   }

function eliminar($idEliminar){

$query = "UPDATE labs SET estado=3 WHERE labs.idlab = $idEliminar";
    $result = do_query($query);

}

What this function does is taking the id of the button and finding the lab with the same id, then changing that lab's estado to 3.

When doing a select (I know the code is prone to injection >.<) I have been using something like this:

$query = "SELECT bk.idlab , bk.codigolab , bk.capacidad, bk.carrera, bk.ubicacion, bk.estado FROM labs as bk WHERE bk.idlab = $pId ";

So perhaps I need to set an "alias" to my alter statement as well?

Answer 1

$(document).on('click',".btnEliminar",function() {
  var idAttr = $(this).attr('id');
  var id = parseInt(idAttr.substring(12));

  var request = $.ajax({
    url: "includes/functionsLabs.php",
    type: "post",
    data: {

    'call': 'displayInfoLabs',
    'pId':id},

    dataType: 'html',

  success: function(response){
    $('#info').html(response);
    }
  });
});

would you try this ?

Answer 2

You need to watch the future elements events, you can do that with jquery on method and delegated events.

http://api.jquery.com/on/

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

So instead of $(".btnEliminar").click(function() {

use $("body").on("click",".btnEliminar", function() { ...

Notice that you should replace "body" for a container that holds less elements.

You can use console.log to debug in javascript and check if your errors are in your PHP or not.