Add click event listener and pass parameter

Question

I have this jQuery function that displays a card for each search result with some info about the result.

I would like to be able to click the card and bring up a dialog which will be a detailed view of the result.

How do I add a click event listener that passes the result through as a parameter so that I can use the result in the result detail dialog?

 displayResults() {
    $('#result-cards').empty();
    var id = 0;
    this.results.forEach(result => {
      $('#result-cards').append(`
      <div class="col-sm-6 col-md-4 col-xl-3 product-item-container">
        <div class="form-group product-item scale-on-hover">
                <div class="">
          <div class="">
                      <div class="image" id="image` + id + `"></div>
          </div>
                    <div id="info">
            <h6 id="brand">` + result.brand + `</h6>
                        <h6 id="name">` + result.name + `</h6>
            <hr>
                    </div>
                </div>
        </div>
            </div>
      `
      );
      $('#image' + id).css("background", result.image);
      id++;
    });
    this.padding = "10px 0px 50px 0px";
    this.height = "inherit";

  }

Something like give each result card an id and do $("#result" + id).click(this.displayDetailView(result)); within the foreach?

Can you simply pass the result object through like that?

score 0 · Answer 1 · edited May 23 '17 at 12:08

As this SO answer states, you can use this syntax to pass a param to a click event handler:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

My code:

displayResults() {
    $('#result-cards').empty();
    var id = 0;
    this.results.forEach(result => {
        $('#result-cards').append(`
        <div id="result` + id + `" class="col-sm-6 col-md-4 col-xl-3 product-item-container">
            <div class="form-group product-item scale-on-hover">
                    <div class="">
                <div class="">
                        <div class="image" id="image` + id + `"></div>
                </div>
                        <div id="info">
                    <h6 id="brand">` + result.brand + `</h6>
                            <h6 id="name">` + result.name + `</h6>
                    <hr>
                        </div>
                    </div>
            </div>
        </div>
    `
        );
        $('#image' + id).css("background", result.image);
        $("#result" + id).click({ result: result }, this.resultClick);
        id++;
    });
    this.padding = "10px 0px 50px 0px";
    this.height = "inherit";
}

resultClick(event) {
    console.log(event.data.result);
}

Add click event listener and pass parameter

1 Answers1