从.ascx文件调用Javascript函数

Question

I have one javascript function named 'change2()' which is define in .ascx page's script tag.
I want to call that function from onclick event of img tag (Note : img tag is also on the same page).
It is compulsory to use img tag only for image.
I tried all the below ways, but unfortunately It doesn't work for me.

Test.ascx

    <script language="javascript" type="text/javascript">
        function change2() {
            alert("Hi");
        } 
    </script>




  <table>
        <tr>
          <td class="list">
               Most liked
          </td>
          <td>
              <img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclick="change2();" alt="Slider" />
           </td>
          </tr>
     </table>

Second Way :

<table>
            <tr>
              <td class="list">
                   Most liked
              </td>
              <td>
                  <a href="#" onclick="change2();"><img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server"  alt="Slider" /></a>
               </td>
              </tr>
         </table>

Please give me your suggestions to call javascript function from same page.

Answer 1

As I can see, the img id is imgLkU , so, instead of including the call in the img tag itself, you can subscribe the event "from the outside", ie do it like using $.on , (or $.click ) like this:

$.on('click','#imgLkU', function() { change2(); });
// or equivalent  $.on('click','#imgLkU', change2);

or

$.('#imgLkU').click(function() { change2(); });
// or equivalent $.('#imgLkU').click(change2);

Do it right after defining change2 in the same script tag.

I'd also recommend you doing the change2 definition and the event subscription inside an inmediately invoked function expression to avoid polluting the global javascript namespace.

(function() { 
   // define and subscribe here
 })();

Answer 2

Because your elements all have runat="server" , their onclick property is reserved for a backend-code actionlistener which will be executed at postback.

the onClientClick property is reserved to allow you to still attach javascript "listeners" to what is considered the client-side onclick .

keep in mind that returning false from an onClientClick handler will prevent postback from happening if an onclick listener is also hooked up. ( onClientclick is executed before initiating the postback)

try this :

<img id="imgLkU" src='<%# WebHelper.GetBaseURL(Request) + "/images/slide_btn_down.png"%>'class="icon_right_panel" runat="server" onclientclick="change2();" alt="Slider" />

Answer 3

The following function can be directly called from document.ready function like

$(function () {
    $('#imgLkU').click(function () {
        //do what ever you want
    })
});

Answer 4

First, take out the runat="server" on your image since you are already using server tags to set the url. If you still want to use runat="server" , you can either:

1: change your img into an <asp:Image> tag and use ImageSource instead of src and OnClientClick instead of onclick .

2: set the src attribute in the code behind.

After that, any click method - from your question to all the answers - should work.

If that still does not show the alert, then start taking out code until it does and work your way from there...