Search code examples
javascriptjqueryjeditable

How to use one function for many items JEditable/JQuery


I have the simple JS code for making a simple field editable:

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.jeditable.js"></script>
</head>
<body>
    <table border='1'>
    <div id="load-button" style="border:1px solid black; background-color:white;padding:5px;cursor:pointer;width:200px;text-align:center;border-radius:4px;">Load button</div>
    <b class="mouseover1" style="display: inline">mouseover me1</b>
    <b class="mouseover2" style="display: inline">mouseover me2</b>
    <script type="text/javascript" charset="utf-8">
        $(function() {
          $(".mouseover1").editable("echo.php", { 
              event     : "mouseover",
              style  : "inherit"
          });  
        });
    </script>
</body>
</html>

My knowledge of JS is very small, and I need to know how I can set function for mouseover1 field and mouseover2. Thank you.


Solution

  • use selector:

    $(".mouseover1,.mouseover2")
    

    or better make them both the same class