title: Best practice to set up JavaScript event handlers for partial views
body: <p>I have a partial view that is loaded via JQuery ajax. It enumerates through properties in the Model and renders HTML elements which need JavaScript events bound. </p>
  
  <p>Here is some simplified razor code I have now</p>
  
  <pre><code>foreach(MyObject item Model.MyObjectList)
  {
  
     string containerId = "Container" + item.Id;
     string onMouseOut = "DoSomething('"+containerId+"',@Model.Id)";
     &lt;div id="@containerId" onmouseout="@onMouseOut"&gt;
       //Other code here
    &lt;/div&gt;
  }
  </code></pre>
  
  <p>This works OK however it is often said to be better to bind events in JQuery, if I did this you could also utilise JQuery events such as "onmouseleave".</p>
  
  <p>So another method I could do is place a script block inside each enumeration which sets up the events like so </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
    $('#@containerId').mouseout(function(){
     DoSomething('@containerId',@Model.Id)
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>However this results in lots of script block being rendered.</p>
  
  <p>Is there another better solution for setting up events in partial views?</p>