我的页面不会使用ajax动态加载

Question

I am trying to dynamically change the content of my #nonMobileDiv in index.

Here's a part of my index.php:

<div class = "tiles">
    <a href="CreateNotebook.php" id="createNew">
    <img src="images/addSign.png" alt="Nature">
        <div class="titleMask">
           <h2>Create Notebook</h2>
        </div>
        <div class = "mask">
           <p>Create your own Notebook</p>
        </div>
    </a>
</div>

Here's my function:

 $('.tiles').on('click', 'a', function (e) {
        e.preventDefault();

        var url = $(this).attr('href');

        $.ajax({
            type: 'GET',
            url: url,
            success: function (data) {
            $('#nonMobileDiv').html(data); 
        }

        });

    });

I am wondering why it redirects to CreateNotebook.php even though I used the e.preventDefault(). I would love to hear any ideas.

Thanks.

Answer 1

thanks for all your comments and suggestions, apparently I have an open ended (incomplete and I think badly written) function written before my $('.tiles').on('click', 'a', function (e) { that causes the problem.