javascriptjqueryjquery-load

Delete only works once


I'm having an issue with this piece of code.

 if (attributeName == 'id') 
  {
    var loadUrl = "http://localhost:8000/OB_ViewDetails/";
    $.ajaxSetup ({
      cache: false
      });

    $("#discard").click(function(){
      var id = dataValue;
      // alert(id);

      $.ajax({
        url: 'deleteob/' + id
        // success:alert
      }).done(function(data){

        $("#obfull").load(loadUrl + ' #obfull > *', function(responseText) {
          if(responseText != '') $('#msg').append('<p class="alert alert-success">delete successful</p>')
          .children().delay(2000).fadeOut('slow');
        });

      });

    });

  }

Using the .load function from jQuery. The problem is that my data works only on the first call, but not on the 2nd one.

I use this to delete the selected item from the list. from the modal.

What I want is to continue the process of deleting the selected list items.


Solution

  • Delegate you click event

    $("body").on("click","#discard",function() {
    
    var id = dataValue;
          // alert(id);
    
          $.ajax({
            url: 'deleteob/' + id
            // success:alert
          }).done(function(data){
    
            $("#obfull").load(loadUrl + ' #obfull > *', function(responseText) {
              if(responseText != '') $('#msg').append('<p class="alert alert-success">delete successful</p>')
              .children().delay(2000).fadeOut('slow');
            });
    
          });
     });