ajax调用后出现jQuery错误

I'm using an onclick event for the Jquery dialog function...

$( document ).ajaxComplete(function() 
{ 
    $("#titleName").on("click",function(e) 
    {            
        $("#userInfo").dialog("open"); 
        e.preventDefault();  
    }) 
})

It works fine until I make the ajax call to load one of the divs..

$("ul#accordion li a").on('click', function (e) 
{   
    $("#mainContent").load(this.href);  
});

After ajax call the onclick is throwing this error(twice) ..

TypeError : undefined is not a function

at this line

$("#userInfo").dialog("open");

The ajax request is bringing in the JQuery library one more time(because of datatables in the request need them).

1) I don't how to avoid loading JQuery twice and at the same time make it to work.

2) I'm not exactly sure, if loading twice is causing the problem.

I've tried using this in both pages but it doesn't work

<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

Edit: Actually the answer below fixed the onclick issue(looks like JQuery is not loaded twice) But now the data loaded with this request doesn't have any styles or javascript applied.

When I open these requests in a new page they are working fine. But when loaded with ajax request it has only plain data(no styles).

The error TypeError : undefined is not a function means that .dialog is being seen as an undefined element, rather than as a function, which means that you don't have the functions properly imported. You've mentioned that other jQuery functions are working, but the dialog widget is from jQuery UI, rather than the core jQuery library, so you need to make sure you've imported both. If jQuery UI is properly loaded, .dialog will be recognized as a function rather than an undefined.

However, if you've properly imported both jQuery and jQuery UI, it's likely that, as you suspect, your problem is coming from the reloading of jQuery when your ajax request is called. You can wrap your loading of the script as such to avoid adding it a second time:

if (typeof jQuery == 'undefined') {  
  document.write('<script type="text/javascript" src="jquery-1.11.0.min.js"></script>');
}