Click event on li tag not working properly-CodePudding

I was trying to call a function(ajax) on edit or delete. But due to some plugin behavior the div which created after page load using setTimeout is getting removed.

I need to show and trigger the div with edit and delete even when the user is clicking on it.

I added the code in this jsfiddle

CodePudding user response：

Its seems that you didnt written the function. I seen in the console it giving error as edit_role_ajax is undefined. So, I defined it as below, you can change logic as per your requirement.

   function edit_role_ajax(){
    alert("hello")
    //put your logic to show div here
   }

CodePudding user response：

There is a couple of things I have fixed in your code and is now working as expected.

You can NOT use append in treeview like that - because each time you append something and you click on treeview library refreshes the tree again and hence why your div was getting removed after initially loading on page load.

You can load the buttons with your array tree text attribute using forEach (to make it easy and not repeating code) loop you can change the value of your text and add your button towards that line.

//Custom buttons
var customBtns = '<div style="float: right;margin-right: 50px;"><span onclick="edit_role_ajax(this, event)">Edit</span>&nbsp;&nbsp;<span onclick="delete_role_ajax(this, event)" >Delete</span></div>'

//Add buttons to each text
tree.forEach(function(o, i) {
  o.text =  o.text   customBtns //append buttons
}, tree); // use arr as this

After it's loaded with the buttons it will work dynamically and will not remove from your li data

I have also added code in your edit and delete function which tells you which node/li was selected or clicked and you can add your logic or ajax to it.

Working Demo:

//Custom buttons
var customBtns = '<div style="float: right;margin-right: 50px;"><button onclick="edit_role_ajax(this, event)">Edit</button>&nbsp;&nbsp;<button onclick="delete_role_ajax(this, event)" >Delete</button></div>'

//Your tree
var tree = [{
    text: "Parent 1",
    nodes: [{
        text: "Child 1",
        nodes: [{
            text: "Google",
            href: "https://www.google.com"
          },
          {
            text: "Twitter",
            href: "https://www.twitter.com"
          }
        ]
      },
      {
        text: "Facebook",
        href: "https://www.facebook.com"
      }
    ]
  },
  {
    text: "Google",
    href: "https://www.google.com"
  },
  {
    text: "Twitter",
    href: "https://www.twitter.com",
    tags: ["link"]
  }
];

//Add buttons to each text
tree.forEach(function(o, i) {
  o.text = o.text   customBtns //append buttons
}, tree); // use arr as this

//Initiate tree
window.initTree = function(treeData) {
  $('#tree').treeview({
    data: treeData,
    enableLinks: true
  });

  // collapses all nodes
  $('#tree').treeview('collapseAll', {
    silent: true
  });
}
initTree(tree);

//Delete button
function delete_role_ajax(_this, e) {
  e.preventDefault()
  //put your logic to show div here
  var getNodeID = $(_this).closest('li.list-group-item').data('nodeid')
  alert('Delete Clicked with nodeID = '   getNodeID)
}


//Edit button
function edit_role_ajax(_this, e) {
  e.preventDefault()
  //put your logic to show div here
  var getNodeID = $(_this).closest('li.list-group-item').data('nodeid')
  alert('Edit Clicked with nodeID = '   getNodeID)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" / <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<link href="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css" rel="stylesheet" />
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js"></script>

<div >
    <div id="tree"></div>
</div>