0

I have dynamiclly created divs on a page that are draggable via jquery.

I have added a small button on each div that allows the user to delete the div with a click.

The problem I have is, I set the highlighted div as the foremost item on the page but if the div is overlapping another div and the user clicks the delete button, the div underneath is highlighed and brought to the front instead of the button being clicked.

I have positioned the button inside the div but position does not seem to have any effect. The button is appened to the div.

I am making the assumption that its something to do with the z-index of the button but I may be completely on the wrong track

any help would be appreciated.

here's the code that I use to append the button to the div. This code is called just after the div is created within the create div function loop.

  var but=document.createElement('input');
  but.setAttribute('type','button');
  but.setAttribute('class','removebutton');
  but.style.position = "absolute";
  but.style.top = "15px";
  but.style.left = +width+"px";
  but.style.float="right";
  but.style.visibility="hidden";

  but.onclick=function(){
    if(confirm('Really delete?'))
      {                   
       $.post("delete_box.php",{i:i, page_ref:'<? echo $page_ref; ?>', template_ref:'<? echo $template_ref; ?>'}, function(data,status){ });    
    document.getElementById("frmMain").removeChild(newdiv);
    document.getElementById(id).removeChild(but);
    document.getElementById(id).removeChild(newbr);

      }             
   }

here's the code I use to bring the clicked div to the front and push anything else back (each div has the class name of dragbox)

   $('.dragbox').click(function() 
      { 
         $(".removebutton").css('visibility', 'hidden');
         $(this).css({  
        'background-image':'url(img/move.png)',
        'background-repeat':'no-repeat',
        'width':'15px',
        'height':'15px',
        'zIndex':'1000'
        })
        $(this).find(".removebutton").css('visibility', 'visible');

  });   



$('.dragbox').focusout(function() {   
    $(this).css({
                   'border', '0px',
           'background-color', 'transparent',
           'width', '0px',
           'z-index', '0'
        })      
      });
4

1 回答 1

1

I think you need to stop the propagation of the click event on the button.

When a user clicks the button, then the click event will be passed (aka bubbeling) to all the underlying elements of the click position.

but.onclick = function(e){
    e.stopPropagation(); // stop the propagation of the click event to other elements

    // ... your code             
}
于 2013-04-22T09:25:52.077 回答