jQuery .on click event does not occur

Hi and thanks for reading. I've been trying to avoid using HTML onclick="__" references and instead putting these events in my .js file. After reading about jQuery's .click() and then .on() events, I tried to use this in my code for a button.

edit In my haste to make up a <p> that didn't have the rest of the contents, I entered "name" instead of "id". Many answers have recommended I either switch to a p[name=p+ or #p+ reference, but my main problem has been that I can't even hit the alert before the reference to the id/name. Thanks again for your answers.

HTML:

<p name="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

JS:

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("p" + $(this).attr("name")).remove();
    });
});

The above code won't even get to the alert when I click the button. I've also tried referring to the button by name and ID, and going by $(document).ready($('.deleter')___.

I tried using the $(handler) format as well to have the click event be set after the document is ready. Neither way seems to work. At this point, I resorted to onclick="deleteButton()" and have a deleteButton() function in my .js file, but the function won't detect $(this) and just deletes all <p> tags.

The rest of my javascript is working. I haven't tried including this .on() at the bottom of the HTML, but I'm trying to avoid scripts in my HTML as well. For completeness' sake, I've been testing on both Chrome and Firefox, using a .jsp file to render the HTML.

Thanks again.

Edits

here's how I'm referencing my jquery and js, directly copy-pasted.

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
</head>

here is how my html looks leading up to the div where the

is inserted:

<body>
    <div id="wrapper">
        <div id="header">Card Draw Probability Calculator</div>
        <div id="main">
            <div id="cardList">
                <fieldset>
                    <legend> Select cards for probability calculation</legend>

                        <div id="innerCardList"></div>

Here is how the <p> is generated:

function newestCardListLineMaker() {
    var $newLine = $('<p id="newestPara"><input type="checkbox" name="new" value="none"/> <input class="cardText" type="text" maxlength="30" name="newestCard" /> Quantity <input type="text" maxlength="1" class="quantityText" name="newestQuant" /><button class="deleter" id="newestDelete">Delete</button><br/></p>');

    $("#innerCardList").append($newLine);

On another note, which I should have seen before as significant: the HTML that the .click or .on(click, handler) is referencing has been created by another js function.

Solution

Try using .on() function, so your code would be:

$(document).ready({
  $('.deleter').on('click', function(){
     //do stuff here
  });
});

Even better would be this:

$(document).ready({
   $('div_above_.deleter').on('click', '.deleter', function(){
     // do stuff here
   });
});

Hope this helps you.