मुझे एक आसान समस्या का सामना करना पड़ रहा है लेकिन समाधान खोजने में असमर्थ समस्या है

मैं कुछ तत्वों के साथ कुछ डेटा के साथ एक गतिशील div भी बना रहा हूं

$("#divSearchedIssue").append(`
<div class="statistic d-flex align-items-center bg-white has-shadow">
  <div class="icon bg-red">
    <i class="fa fa-tasks"></i>
  </div>
  <div class="text">

    ***//want to get this below id value//**

    Mobile Code :
    <small id="mbCode"> 
      ${ data[0].MobileCode }
    </small>

    ***/want to find/**

    <br>
    Failed From:
    <small>
      ${ data[0].FailedStation }
    </small>

    <br>
    Issues :
    <small>
      ${ data[0].Issues }
    </small>
  </div>
  <div class="text"><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong></div>
  <div class="text">
    <button type="button" id="btn" class="btn btn-warning pull-right">Start</button>
  </div>
  <div class="text"><br></div>
</div>`);

यहां मेरे पास एक बटन है। इस बटन पर क्लिक करें, मैं मूल्य प्राप्त करना चाहता हूं कोड के अंदर ऊपर बताए अनुसार छोटा टेक्स्ट जो आईडी #mbCode है

मैं निम्नलिखित बटन क्लिक कोड का उपयोग करके यह कोशिश कर रहा हूं:

$(document).on('click', '#btn', function () {
    var data = $(this).closest('small').find('#mbCode').val();
    alert(data);
});

लेकिन यह काम नहीं कर रहा है। मेरा मतलब है कि मैं इस बटन पर #mbCode का मूल्य प्राप्त नहीं कर सकता। इसलिए मदद की जरूरत है मदद के लिए धन्यवाद

0
Asifuzzaman Redoy 27 मार्च 2018, 14:53

2 जवाब

सबसे बढ़िया उत्तर

.closest() पर आधारित

विवरण: सेट में प्रत्येक तत्व के लिए, पहला तत्व प्राप्त करें कि स्वयं तत्व का परीक्षण करके चयनकर्ता से मेल खाता है और ऊपर जा रहा है अपने पूर्वजों के माध्यम से DOM ट्री में।

चूंकि <small> पदानुक्रम में बटन का पूर्वज नहीं है (ट्रैवर्सिंग-अप के दौरान),

तो आपको पहले <small> के माता-पिता के पास .closest() के माध्यम से जाना होगा और फिर .find() और .html() का उपयोग करके <small> html खोजने का प्रयास करना होगा।

$(document).on('click', '#btn', function () {
    var data = $(this).closest('.statistic').find('small').html();
    alert(data);
});

कार्य स्निपेट:-

data = [{'MobileCode':20,'FailedStation':'WATERLOO','Issues':'broken'}];
$("#divSearchedIssue").append('<div class="statistic d-flex align-items- center bg-white has-shadow"><div class="icon bg-red"><i class="fa fa-tasks"></i></div><div class="text">Mobile Code :<small id="mbCode">' + data[0].MobileCode + '</small><br>Failed From: <small> ' + data[0].FailedStation + '</small><br>Issues :<small> '+ data[0].Issues + '</small></div><div class="text"><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong></div><div class="text"><button type="button" id="btn" class="btn btn-warning pull-right">Start</button></div><div class="text"><br></div></div>');

$(document).on('click', '#btn', function () {
  var data = $(this).closest('.statistic').find('small').each(function(){
    alert($(this).html());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>

नोट:- .text() भी काम करेगा

https://jsfiddle.net/tyz4ox50/

3
Alive to Die 27 मार्च 2018, 12:29

चूंकि पहचानकर्ता अद्वितीय होने चाहिए, {a href="https://api.jquery.com/id-selector/" rel="nofollow noreferrer">ID चयनकर्ता के साथ सीधे उपयोग करें .text()/.html() विधि

var data = $('#mbCode').text()

हालाँकि, यदि आप एक से अधिक तत्वों को जोड़ रहे हैं, तो मैं <button> के साथ कस्टम data-* विशेषता का उपयोग करके मोबाइल कोड मनमाना डेटा जारी रखने के विकल्प का सुझाव दूंगा जिसे .data(key) का उपयोग करके प्राप्त किया जा सकता है। और कक्षा चयनकर्ता का उपयोग करके ईवेंट हैंडलर संलग्न करें

$("#divSearchedIssue").append('<button type="button" id="btn" class="btn btn-warning pull-right" data-mobilecode="' +   data[0].MobileCode + '" >Start</button>');
var counter = 0;

function append() {
  $("#divSearchedIssue").append('<button type="button" id="btn" class="btn btn-warning pull-right" data-mobilecode="' + ++counter + '" >Start</button>');
}
append();
append();
append();


$(document).on('click', '.btn', function() {
  var data = $(this).data('mobilecode');
  console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>
1
Satpal 27 मार्च 2018, 12:15