Jquery .load does not work in Chrome or IE

Hello,
  I have some html code that I would like to include in a another HTML file . I can see the widget but the action event does not work in FF and Chrome , It is working in Fire fox.

I see the alert when I press the search button in Firefox

SEARCHFORM. HTM
 <form class="navbar-form navbar-right" style="width:100%" role="search">
 <div class="input-group">
	<span class=" help input-group-addon"><i class="glyphicon glyphicon-question-sign" style="cursor:pointer"></i></span>
	
    <input type="text" id="q" class="form-control" placeholder="Search" title="search">
    <span class="input-group-btn" id="search" >
    	<button type="button" class="btn btn-default btn-primary logmgrbutton">Search</button>
    </span>
    <span class="input-group-btn" id="reset">
    	<button type="button" class="btn btn-default btn-primary  logmgrbutton">Reset</button>
    </span>
  </div>
</form>

Open in new window


Index. htm

$(document).ready(function() 
		{
			
		      $("#includedViewSearchContent").load("partialhtml/searchform.htm"); 
                      initialize()
		}); 

Open in new window


Initialize.js
$('#search').click(function()
	{
		alert("hello");
	});

Open in new window


Thanks for your help
SiemensSENAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Randy PooleCommented:
add a ; after initialize()
initialize();
0
Alexandre SimõesManager / Technology SpecialistCommented:
Where is the includedViewSearchContent element you're using in the selector?
0
SiemensSENAuthor Commented:
Sorry..
In the index.html
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta charset="ISO-8859-1">
	<title>Log Manager</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/vendor/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="css/vendor/jquery/jquery-ui-1.10.0.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" 	href="css/logmanager.css" />
	<script type="text/javascript" src="js/vendor/jquery/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="js/globalscript.js"></script>
	<script type="text/javascript"	src="js/vendor/jquery/jquery-ui-1.10.4.custom.min.js"></script>
	<script type="text/javascript"	src="js/vendor/bootstrap/bootstrap.min.js"></script>
	<!-- Include the plugin's CSS and JS: -->
		<script type="text/javascript" src="js/vendor/generic/bootstrap-multiselect.js"></script>
		<link rel="stylesheet" href="css/vendor/Generic/bootstrap-multiselect.css" type="text/css"/>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/vendor/html5shiv.js"></script>
      <script src="js/vendor/respond.js"></script>
    <![endif]-->
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() 
		{
		  [b]  $("#includedViewSearchContent").load("partialhtml/searchform.htm");[/b] 
			initialize();
		}); 
	</script>
</head>
<body id="body">
	[b] <div id="includedViewSearchContent"></div>[/b]
</body>
</html>

Open in new window


It work in FF but not IE or Chrome
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Randy PooleCommented:
[b]  $("#includedViewSearchContent").load("partialhtml/searchform.htm");[/b] 
remove [b] and [/b]

Open in new window

0
SiemensSENAuthor Commented:
My code does not have <b></b>. I added to the EE to make the statement bold..

Thanks
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ok, so now I'm only missing where is the initialize() function...

When it doesn't work do you get any javascript errors in the console?
0
leakim971PluritechnicianCommented:
$(document).ready(function() {
     $("#includedViewSearchContent").load("partialhtml/searchform.htm", initialize);  // initialize once the content is loaded           
});

Open in new window


load is an asynchronous ajax, that mean it will take time to load the data.
so imagine a slow connexion and a slow server, your form take four second to be loaded in #includedViewSearchContent
if you run immediatly the initalize function, it will not be able to attach the onclick element because the content is not yet available.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
another way, use this :
$("#includedViewSearchContent").on("click", '#search', function()
	{
		alert("hello");
	});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.