Breadcrumbs change value only once

Question

I have created breadcrumbs dynamically using jquery but the problem I am going through is on click the previous value disappears and a new value will appear in place of that.

Anyone help me out with this how I can create dynamic breadcrumbs

This is how I have to try to create breadcrumbs:

<div id="rdDataTableDiv-ddt"><table style="width: 500px;" class="rdThemeDataTable ThemeAlignCenter" id="ddt"><colgroup><col id="colEmployeeID"><col id="colEmployeeName"></colgroup><thead style="display:table-header-group"><tr><th scope="col" class="rdThemeDataTableHeader" id="colEmployeeID-TH">EmployeeID</th><th scope="col" class="rdThemeDataTableHeader" id="colEmployeeName-TH">Employee Name</th></tr></thead><tbody><tr row="1"><td id="colEmployeeID_Row1" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=1&amp;passedValue=&amp;prev=&amp;selectedLabel=1&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row1">1</span></a></td><td id="colEmployeeName_Row1" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row1">Jack</span></td></tr>
<tr row="2"><td id="colEmployeeID_Row2" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=2&amp;passedValue=&amp;prev=&amp;selectedLabel=2&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row2">2</span></a></td><td id="colEmployeeName_Row2" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row2">Smith</span></td></tr>
<tr row="3"><td id="colEmployeeID_Row3" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=3&amp;passedValue=&amp;prev=&amp;selectedLabel=3&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row3">3</span></a></td><td id="colEmployeeName_Row3" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row3">Kate</span></td></tr>
<tr row="4"><td id="colEmployeeID_Row4" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=4&amp;passedValue=&amp;prev=&amp;selectedLabel=4&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row4">4</span></a></td><td id="colEmployeeName_Row4" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row4">Donald</span></td></tr>
<tr row="5"><td id="colEmployeeID_Row5" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=5&amp;passedValue=&amp;prev=&amp;selectedLabel=5&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row5">5</span></a></td><td id="colEmployeeName_Row5" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row5">Micky</span></td></tr>
<tr row="6"><td id="colEmployeeID_Row6" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=6&amp;passedValue=&amp;prev=&amp;selectedLabel=6&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row6">6</span></a></td><td id="colEmployeeName_Row6" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row6">Rick</span></td></tr>
<tr row="7"><td id="colEmployeeID_Row7" class="rdThemeDataTableCell items"><a href="javascript:void(0);" onclick="rdAjaxRequestWithFormVars('rdAjaxCommand=RefreshElement&amp;rdRefreshElementID=anvita&amp;empID=7&amp;passedValue=&amp;prev=&amp;selectedLabel=7&amp;shwDetail=2&amp;rdReport=Breadcrumbs','false','',null,null,null,['','',''],true);"><span id="lblEmployeeID_Row7">7</span></a></td><td id="colEmployeeName_Row7" class="rdThemeDataTableCell"><span id="lblEmployeeName_Row7">Jill</span></td></tr>
</tbody></table><div id="rdDataTableDivEnd-ddt"></div></div>

This is the table I have created so the logic I have applied on click on employee id it appears as breadcrumb with link

this is the jquery I have used

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.parents('td').each(function(n, td) {
    var $a = $(td).children('a').clone();
    $bc.prepend(' / ', $a);
  });

  $('.breadcrumb').html($bc.prepend('<a href="#home">Home</a>'));

  return false;
})

What I want is to create breadcrumbs trails with the links

`$('.items a').on('click',` will only apply to the items that exist at the time. It *looks like* you're adding new items that would match `$(".items a")` and these would not be picked up by the first call. Change to `$(document).on("click", ".items a", function...` — freedomn-m, Jan 04 '22 at 09:00
This works the same as the previous one. i just wanted when somebody clicks on the employee id then it appears in the breadcrumb with there link and when some body again click on any employee id then previous one is also there so that if user wants to go back then he/she can — Anvita Rastogi, Jan 04 '22 at 09:16
Suggested solution: [event binding on dynamically added elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Jan 04 '22 at 09:18
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — cloned, Jan 04 '22 at 09:20
i have tried it by binding event but the issue is same only single value has changes instead of creating breadcrumb trail — Anvita Rastogi, Jan 04 '22 at 09:20
*previous one is also there* your issue is that you're building the breadcrumb items from scratch each time and replacing the entire .breadcrumb. If you want previous entries (and they're *not* from the `.parents("td")`) then don't use `.html(new_html)` as this replaces what's there. Instead, build up from what's already there or use `.append` to add new items. — freedomn-m, Jan 04 '22 at 09:31
I have updated $('.breadcrumb').append($bc) ; instead of this $('.breadcrumb').html($bc.prepend('Home')); but now the previous trail appears but when i click on previous trails the breadcrumb trail is not updated as it should remove the new one — Anvita Rastogi, Jan 04 '22 at 09:41
Now when we click on the previous breadcrumb then next breadcrumb is not disappears — Anvita Rastogi, Jan 04 '22 at 12:52

Breadcrumbs change value only once

0 Answers0