Click button and toggle the button label

Question

I have created following function.

function appendActionToMarkertText(markerText, lat, lng) {

     markerText = markerText + '<br/> <button class="slds-button slds-button_neutral" id="GRadiusID" onclick="GenerateRadius(' + lat + ',' + lng + ')"> Generate Radius </button>';
     return markerText;
 }

I want to take this button id (GRadiusID) to outside for my jQuery part.

j$(document).ready(function () {
    j$("#GRadiusID").click(function(){
    var gr = j$(this).text();
    if(gr=="Generate Radius"){
        GenerateRadius(lat, lng);
     }
     else if(gr=="Clear Radius"){
         clearRadius();
     }
     });
  });

Don't use picture for your code please. If someone wants to try it, he firstly need to write it by himself. — klediooo, Nov 17 '20 at 09:33
Since your tags include Salesforce references I suggest you take a look at their training materials for Lightning Web Components: https://trailhead.salesforce.com/en/content/learn/modules/lightning-web-components-basics?trail_id=lex_dev. Their approach is a bit different that what you have here. There are a couple issues with the code samples, but honestly I would expect SF related components to be different enough that addressing those issues is unlikely to get the results you want. — acrosman, Nov 18 '20 at 03:47
@laguf1.mobi inside the function have a button know. I want to take that button id to outside for my jQuery code. If have any path to do that? — Rajitha Adihetty, Nov 18 '20 at 04:55

score 0 · Answer 1 · answered Nov 19 '20 at 03:09

you can only map the node after you insert it into the DOM. So the solution for you to do that is that as soon as you call the appendActionToMarkertText function, you will use jquery to find the button. Example:

$(function(){
function appendActionToMarkertText(markerText, lat, lng) {

     return markerText + '<br/> <button class="slds-button slds-button_neutral" id="GRadiusID" data-lat="'+lat+'" data-lng="'+lng + '"> Generate Radius </button>';
 }
 
 $('#btn').click(function(){
    $('#example').html(appendActionToMarkertText('make text', 'aaa', 'bbb'));
    
    $("#GRadiusID").click(function(){
      var gr = $(this).text().trim();
      if(gr=="Generate Radius"){
        alert($(this).data('lat'));
        //GenerateRadius(lat, lng);
      }else if(gr=="Clear Radius"){
         clearRadius();
      }
    });
 })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">hello word</div>

<button id="btn">click me</button>

Click button and toggle the button label

1 Answers1