We Keep Coding

Bootstrap tooltip does't work when I use jQuery to append the tooltip elements

how are you guys I have a question if anyone can help me, I'll be grateful.
at the moment I was using some bootstrap functionality, for example, this code below.
I'm using bootstrap version 3
<div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>
this code works well in html file.
But when I use Jquery append element this doesn't work the same way
code using jquery append.
<button id="someid" onclick="addElement()"> ADD element </button>
<div id="addhere"> </div>
script tags
<script>
function addElement(){
let ElementToAdd = ` <div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>`
$('#addhere').append(ElementToAdd)
}
if someone tells me why this occurs I will be totally grateful

Take a look at this:
How to bind bootstrap tooltip on dynamic elements
In order to make a dynamically injected tooltip work, you must initialize a tooltip plugin using an element, which exists already after the page is loaded, e.g. body. It should then work.

A simple answer is Bootstrap = CSS + JS.
Try to hide element onload and when you need show.

jQuery DataTables append div to specific place

I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.

You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());

Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');

jQuery Select Dynamically Content

I have a page which contain dynamic content.
<div id="content-1">
<div id="subcontent-1"></div>
<i id="delete-1"></i>
</div>
.
.
.
<div id="content-10">
<div id="subcontent-10"></div>
<i id="delete-10"></i>
</div>
How to select dynamic content with jQuery selectors and how to understand which content will be deleted I'm not sure and confused.
Need to understand which delete for clicked by user.

In your markup, it will be easier to select elements if you can add a class to them like
<div id="content-1" class="content">
<div id="subcontent-1"></div>
<i id="delete-1" class="delete">i</i>
</div>
then use the class selector to register the event handlers
$(document).on('click', '.content .delete', function(){
$(this).closest('.content').remove();
})
Event binding on dynamically created elements?

Enumerating data-targets in ng-repeat

I have an accordion in my HTML that is dynamically populated as such -
<div class="accordion">
<div class="accordion-panel">
<div class="accordion-heading>
<a data-target="#collapse" data-toggle="collapse">{{x.header}}</a>
</div>
<div id="collapse" class="accordion-body">
....
</div>
</div>
</div>
The problem is that the data-target remains static. So all the open/close buttons only open one piece of the accordion! The solution would be to enumerate the data-target/ids based on $index, but I don't know how to do that.
Is there a way to enumerate attributes in the way that I described? Or is there another solution I can use?

Just replace data-target value with #collepse-{{$index}} and ID of body with 'collapse-{{$index}}'
Hope this might be helpful to you!!

How to delete div not having <a> tag from Multiple div with same classes?

Here I am generation Multiple div but some div does not contain tag. I want to delete such divs on button click event.
<div class='small-4 large-4 columns'>
<a class='notifications_star none' href='#' id='rank'></a>
</div>
<div class='small-4 large-4 columns'>
</div>
<div class='small-4 large-4 columns'>
<a class='notifications_star none' href='#' id='rank'></a>
</div>
how to delete 2nd div? I have many div like 2nd one and I want to delete it on Button click.

You can use not method:
$('div.columns').not(':has(a)').remove();
Please note that IDs must be unique.

You can use compound selector with :not and :has:
$("div:not(:has(*))").remove();
This will remove all <div> elements that do not contain any tag inside.

Another option:
$('div.columns').filter(function(){
return !$(this).find('a').length;
}).remove();