PythonEnthusiast PythonEnthusiast - 2 months ago 8
Javascript Question

Get the id of the popover button

I'm dynamically adding buttons to the DOM. On each button, there's a popover. Here's my code:-

<button class="pop-Add" id='button1'>Add</button>

var popOverSettings = {
placement: 'bottom',
container: 'body',
selector: '[rel="popover"]',
html:true,
content: "<button type='button' id='+50' class='btn btn-small pop_button'> + 50 </button>"
}

$('body').popover(popOverSettings);
$('.pop-Add').click(function () {
var id = Math.floor((Math.random() * 1000000) + 1);
button = "<button rel='popover' id='" + id + "'>Click me</button>"
$('body').append(button);
});


jsFiddle

I want to get the id of that
ClickMe
button whose popover button '+50' is clicked. How can I get it?

This is how I'm currently doing:-

$(document).on('click', '.bid_value_buttons' , function(){
alert($(this).attr('id'))
}

Answer

I have done this by using below code:

HTML:

    <button class="pop-Add">Add</button>
<script>
 function display(el) {
        var id = $(el).parent().parent().prev().prop("id");
        alert(id);
    }
    </script>

jQuery Code:

var popOverSettings = {
    placement: 'bottom',
    container: 'body',
    selector: '[rel="popover"]',
    html:true,
    content: "<button type='button' id='+50' class='btn btn-small btn-empty bid_value_buttons'> + 50 </button>"
}

$('body').popover(popOverSettings);
$('.pop-Add').click(function () {
        var id = Math.floor((Math.random() * 1000000) + 1);
    button = "<button rel='popover' id='" + id + "' OnClick='display(this);'>Click me</button>"
    $('body').append(button);
});

checkout this fiddle.

Please find below the screenshot :

enter image description here

Hope it helps you

Thanks