如何从HTML元素执行javascript函数并发送该元素名称，而无需专门使用其名称？

Question

If there is an answer to this question out there I can not find it.

I have the following function in JavaScript and need to be able to reuse it over and over.

 function ParentService_load(_Object) { $(_Object.parent.parent).jqxDropDownButton({ ... }); $(_Object).jqxGrid({ ... }); $(_Object).bind('rowselect', function(event) { ... var row = $(_Object).jqxGrid('getrowdata', args.rowindex); ... $(_Object.parent.parent).jqxDropDownButton('setContent', dropDownContent); if (row["servicename"].toString().toLowerCase() === "new") { $(_Object.parent.parent).jqxDropDownButton('close'); ... } }); } 

 <div id="jqxParentServiceDropdownButton"> <div id='jqxParentServiceDropdownWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxParentServiceDropdownGrid" onload="ParentService_load(this);"></div> </div> </div> 

I haven't found a definitive way to call a javascript or jquery function from an element and have that function use that elements' name, etc... So how would I accomplish this?

Answer 1

If by "name" you mean id , then within your function, you can access that as _Object.id . Because you're passing this in your onload=... (but see below), that's a reference to the element on which the event occurred. Within the function, you're receiving that argument as _Object , so you can use the properties on _Object to access information about the element, including its id .

---

But note that div elements don't have a load event. Also, div elements don't have a parent property; you may be thinking of parentNode .

Answer 2

I'm not completely sure what you are asking, so here are a bunch of examples about returning values embedded in the HTML from a function;

$(document).ready(function(){
  $(".lw").click(function() {
    alert("Class:" + $(this).attr("class") + 
          "\nID:" + $(this).attr("id") + 
          "\nData:" + $(this).data("test") + 
          "\nName:" + $(this).attr("name") + 
          "\nTagname:" + $(this).prop("tagName"));
    alert($(this).parent().prop("tagName"));
  });
});

http://liveweave.com/CZSYqW

Clicking on either of the <p> elements returns a different value in an alert box.