jQuery的用法：$（document）.on（）[重复]

Question

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/16057640/difference-between-on-functions-calls" dir="ltr">Difference between .on() functions calls</a>
                            <span class="question-originals-answer-count">
                                (3 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2014-09-22 04:11:15Z" class="relativetime">5 years ago</span>.</div>
        </div>
    </aside>

I want to use jquery .on() to do the AJAX

Anyway,I test two method below,both of them works
I want to know what's the difference between them??
are the both method correct?

<script type="text/javascript">
/*method 1*/
/*$(document).on('submit', '.login-form', function(){ */
$(document).on('click', '.searchtitle', function(){
    ttest = $(this).serialize();
    console.log(ttest);    
});
/*method 2*/
$(".searchtitle").on('click',   function(){
    ttest = $(this).serialize();
    console.log(ttest);    
});
</script>

test.html
<form action="" method="post"  class="searchtitle">
    {% csrf_token %}
    search activity :<input type="text" name="title">
    <button type="button" class="btn .btn-sm btn-success" id="search">submit</button>
</form>

</div>

Answer 1

Method two is better for performance reason since you limit the scope of the checking that needs to happen every time there is a button click.

The first approach is no more performant than the now deprecated live delegate, but necessary if you can't narrow the scope of the region that needs to be monitored for click events.