Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body>
    <a data-product-id="12345" class="delete">Delete Product</a>
    <br />
    <a data-product-id="12346" class="delete">Delete Product</a>
    <br />
    <a data-product-id="12347" class="delete">Delete Product</a>
    <br />
    <a data-product-id="12348" class="delete">Delete Product</a>
    <br />
    <a data-product-id="12349" class="delete">Delete Product</a>
    <br />
    <a data-product-id="123410" class="delete">Delete Product</a>
    <br />
    <a data-product-id="123411" class="delete">Delete Product</a>
    <br />
    <a data-product-id="123412" class="delete">Delete Product</a>
    <br />
    <a data-product-id="123413" class="delete">Delete Product</a>
    <br />
    <a data-product-id="123414" class="delete">Delete Product</a>
    <br />
​
    <div id="result"></div>
​
    <div id="confirmDeleteModal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Confirm delete</h3>
        </div>
        <div class="modal-body">
            <p>Do you really want to remove this item?</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn semi-bold" data-dismiss="modal" aria-hidden="true">No thanks.</a>
            <a href="#" class="btn btn-danger" id="confirmDelete" data-delete="true" data-dismiss="modal" aria-hidden="true">Yes, I would.</a>
        </div>
    </div>
​
    <script>
    $(document).ready(function(){
        $('.delete').on('click', function() {
            var itemID = $(this).data('product-id')
​
            $('#confirmDeleteModal').modal('show');
            
            $('#confirmDelete').on('click', function() {
            
                $('#confirmDeleteModal').on('hidden', function() {
                   
                        // Here I do my stuff to perform deletion
                        $('#result').append('This method has been called for ' + itemID + ' <br />' )
                });
            });
        });
    });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers