How can I get parents' parents' child's value using jQuery?

Question

I'm a student who is studying Python alone these days. Below is part of my HTML page's JavaScript code.

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm()">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
    </div>
    <br/>
</div>
`

javascript function :

function confirm(){
    alert('confirmed????')
    let test = $(this).parent().parent().find(".card-img-top").attr("src");
    alert(test)
    window.location.reload()
}

What I want to do is:

When user clicks btn-success button, call confirm() function, and get img src (${image} in my code) to call AJAX.

I tried code above but it didn't work. How can I get img src value?

Answer 1

From your comment I see that temp_html_0 will be repeated, then why not just use a subclass with a unique identifier like the iteration index for example and add it to your image class as the following

<img class="card-img-top top-img-{index}">

And then you can pass that index to your function and get that element by using your logic.

Answer 2

You can pass the button reference in HTML event binding confirm(this) reject(this), then you may access the parent and image src in both of the methods as shown in be below snippet.

function confirm(btn) {
  var $btn = $(btn);
  var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
  console.log(`confirmed - ${imgSrc}`);
}

function reject(btn) {
  var $btn = $(btn);
  var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
  console.log(`rejected - ${imgSrc}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <img class="card-img-top" src="${image}" alt=" Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject(this)">Reject</button>
    </div>
    <br />
</div>

Answer 3

The core of the problem is that you use the onclick attribute. The value of it is confirm(), so when activated it will call the function but not set the context in any way. So this will be window (if you're not in strict mode).

A quick fix would be to modify the function definition to function confirm(el){ and the HTML to onclick="confirm(this)" in order to have access to the element that's clicked as a parameter. This leads to this code:

function confirm(el){
    console.log('confirmed👌')
    let test = $(el).parent().parent().find(".card-img-top").attr("src");
    console.log(test)
    //window.location.reload()
}

//////////////////////////////

const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
    </div>
    <br/>
</div>
`

$("#main").append(temp_html_0);

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

However, a better technique is to use event binding on dynamically created elements using event delegation. It will execute the function with the correct context and further allows you to still have a single event handler but you do not mix the HTML with logic that JavaScript would use.:

function confirm(){
    console.log('confirmed👌')
    let test = $(this).parent().parent().find(".card-img-top").attr("src");
    console.log(test)
    //window.location.reload()
}

$("#main") // --> common ancestor for all your dynamic elements
  .on("click", ".btn-success", confirm);
//             ^^^^^^^^^^^^^^  ^^^^^^^ --> event handler to execute
//              ↳ element to monitor for clicks

function reject(){
    console.log('rejected👎');
}

$("#main").on("click", ".btn-danger", reject);


//////////////////////////////

const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success">Confirm</button>
        <button type="button" class="btn btn-danger">Reject</button>
    </div>
    <br/>
</div>
`

$("#main").append(temp_html_0);

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

Answer 4

You can directly pass image src as parameter into confirm function call like this:

<button type="button" class="btn btn-success" onnclick="confirm(${image})">Confirm</button>

and you can get this parameter value inside confirm function.