jQuery पर काम नहीं कर रहा

Question

मुझे अपने ईवेंट हैंडलर को आग लगने में परेशानी हो रही है। मैं जेएसओएन को पेज में नीचे कॉल कर रहा हूं। मैं फिर अपने द्वारा बनाए गए बटनों में से एक पर क्लिक करने में सक्षम होना चाहता हूं जो 'हैलो वहां' अलर्ट निष्पादित करेगा। यह पृष्ठ पर हर दूसरे तत्व के साथ काम करता है, लेकिन <button> नहीं।

क्या कोई मदद कर सकता है?

test.js

$(document).ready(function() { 
    $.getJSON('/api/v1/recipe/?format=json', function(data) { 
    $.each(data.objects, function(i, recipe) { 
     $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
     }); 
    }); 

    $('rmv').on('click', function() { 
     alert('hello there!'); 
    }); 
    }); 

recipe.html

{% extends 'base.html' %} 

{% block content %} 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6"> 
     <form action='' method="post">{% csrf_token %} 
     {{ form.as_p }} 
     <input type="submit" value="go baby!"> 
     </form> 
    </div> 
    <div class="span6"> 
     <table class="table table-striped table-bordered" id="recipes"> 
     <tr> 
      <th>Title</th> 
      <th>Ingredients</th> 
      <th>Method</th> 
      <th>Remove</th> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 
{% block recipes %}{% endblock recipes %} 
{% endblock content %} 

Answer 1

आप चयनकर्ता गलत मिल गया है यह

$('#rmv') 

होना चाहिए और आप जोड़कर कर रहे हैं तत्व गतिशील रूप से आपको चाहिए की तरह उपयोग

$(document).on('click','#rmv',function(e) { 
    //handler code here 
}); 

वापस ajax सफलता कॉल इतनी के रूप में @Alnitak उल्लेख सीडीई

$.getJSON('/api/v1/recipe/?format=json', function(data) { 
    $.each(data.objects, function(i, recipe) { 
    $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn rmv" type="button" >remove</button></td></tr>'); 
    }); 
}); 

संशोधित करने के बाद की तरह वर्ग चयनकर्ता स्विच कर सकते हैं शायद, डुप्लिकेट आईडी है, जो गलत है के साथ तत्वों का उत्पादन करेगा में अपने पाश

और चयनकर्ता देखने

$(document).on('click','.rmv',function(e) { 
    //handler code here 
}); 

Answer 2

की तरह इस कोशिश करेंगे। अंदर callback

$(document).ready(function() { 
     $.getJSON('/api/v1/recipe/?format=json', function(data) { 
      $.each(data.objects, function(i, recipe) { 
       $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
      }); 

     $('#rmv').on('click', function() { 
      alert('hello there!'); 
     }); 
     }); 


    }); 

इस कोड को ले जाने या jQuery.on

$(document).on("click", "#rmv",function() { 
       alert('hello there!'); 
      }); 

Answer 3

$.getJSON('/api/v1/recipe/?format=json', function(data) { 
      $.each(data.objects, function(i, recipe) { 
       $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
      }); 
      $('rmv').on('click', function() { 
       alert('hello there!'); 
      }); 
     }); 

का उपयोग अपने ajax अनुरोध की सफलता समारोह में ईवेंट हैंडलर देते हैं।

संपादित करें - दूसरों के अनुसार, अपने चयनकर्ता rmv गलत है, हो सकता है #rmv

Answer 4

सबसे पहले, आईडी rmv साथ एक से अधिक तत्व नहीं है यह सुनिश्चित करना चाहिये। आईडी को अद्वितीय होना चाहिए, लेकिन आप अपने स्वयं के "निकालें" बटन के साथ कई व्यंजनों को जोड़ रहे हैं।

आपको अपने ईवेंट हैंडलर पंजीकरण के साथ भी समस्याएं हैं - आप ईवेंट हैंडलर को पंजीकृत करने से पहले AJAX कॉल को समाप्त करने के लिए प्रतीक्षा नहीं कर रहे हैं (और फिर तालिका पंक्ति जोड़ें)।

यह AJAX success कॉलबैक के भीतर घटना हैंडलर पंजीकृत करने से हल किया जा सकता है, लेकिन अपने आईडी के साथ पहली समस्या को देखते हुए एक बेहतर समाधान एक आईडी के बजाय एक वर्ग (.rmv) का उपयोग किया जाएगा और उसके बाद का उपयोग करें:

$('#recipes').on('click', '.rmv', function() { 
    var $tr = $(this).closest('tr'); 
    // do something with the current row 
}); 

ऊपर कोड success कॉलबैक के बाहर पंजीकृत किया जा सकता है क्योंकि यह घटना प्रतिनिधिमंडल उपयोग करता है। यह click घटना पर निर्भर करता है जो संलग्न बटन (जो पहले से मौजूद है) तक बुलबुला करता है, बजाय प्रत्येक बटन पर ईवेंट को सीधे पंजीकृत करने के बजाय।

Answer 5

$('#rmv', table).on('click', function(){ 
    alert('hello there!'); 
}); 

Answer 6

jQuery समारोह एक '#' प्रतीक यदि आप एक तत्व की आईडी का उपयोग कर रहे किसी भी कॉल को गति प्रदान करने संलग्न करना आवश्यक है। तो करने के लिए

$('#rmv').on('click', function() { 
     alert('hello there!'); 
    });