jquery基础：Ajax和事件

2019-02-13 10:06:47

如果我们想实现单击后可以显示或隐藏相应的内容。实现这一点应该很简单。
页面完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('h3.name').click(function () {
                $(this).siblings('ul.info_list').slideToggle();
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div>
            <h3 class="name">JOHN	</h3>
            <ul class="info_list">
                <li>Age:20		</li>
                <li>country:USA		</li>
                <li>
                    Evaluate:
                    <ol start="1">
                        <li>A good man!</li>
                        <li>A rich man!</li>
                        <li>A foolish man!</li>
                    </ol>
                </li>
                <li>Rose,James</li>
            </ul>
        </div>
        <div>
            <h3 class="name">Rose	</h3>
            <ul class="info_list">
                <li>Age:20		</li>
                <li>country:USA		</li>
                <li>JOHN</li>
            </ul>
        </div>
        <div>
            <h3 class="name">James	</h3>
            <ul class="info_list">
                <li>Age:20		</li>
                <li>country:USA		</li>
                <li>JOHN</li>
            </ul>
        </div>
    </div>
</body>
</html>

当名字被单击时，该元素找到类名中包含info_list的相邻节点，并根据情况滑入或滑出这些节点。
虽然这样做是可以的，但是如果我们的数据需要动态绑定的情况下，只要一单击其他名字，这些处理程序会丢失绑定。这是通过Ajax生成页面内容时的一个常见问题。对此，一种常见的解决方案就是在页面内容更新时重新绑定处理程序。但这样做会相当繁琐，因为哪怕页面的DOM结构有一点点变化，都会调用绑定处理程序的代码。
另外一种值得推荐的做法是事件委托。
事件委托的本质就是把事件处理程序绑定到一个祖先元素，而这个祖先元素始终不变。
我们可以使用.on()方法把click处理程序绑定到<body>元素，以这种方式来捕获单击事件。
代码清单如下：
a.php 代码：

<?php
$persons = array(
  'JOHN' => array(
    'age' => '20',
    'country' => 'USA',
    'evaluate' => array(
      'A good man!',
      'A rich man!',
      'A foolish man!',
    ),
    'friends' => 'Rose,James',
  ),
  'ROSE' => array(
    'age' => '20',
    'country' => 'USA',
    'friends' => 'John',
  ),
  'JAMES' => array(
    'age' => '20',
    'country' => 'USA',
    'friends' => 'John',
  ),
);

//sleep(3);

if (isset($persons[strtoupper($_REQUEST['name'])])) {
  $name = strtoupper($_REQUEST['name']);
  $person = $persons[$name];
  echo build_html($name, $person);
} else {
  echo strtoupper($_REQUEST['name']);
  echo '<div>Sorry, This person not found!</div>';
}

function build_html($name, $person) {
  $html = '<div>';
  $html .= '	<h3 class="name">';
  $html .= $name;
  $html .= '	</h3>';

  $html .= '	<ul class="info_list">';
  $html .= '		<li>Age:';
  $html .= $person['age'];
  $html .= '		</li>';

  $html .= '		<li>country:';
  $html .= $person['country'];
  $html .= '		</li>';

  if (isset($person['evaluate'])) {
		$html .= '<li>Evaluate:';
		$html .= '	<ol start="1">';
		foreach ($person['evaluate'] as $line) {
		  $html .= '<li>'. $line .'</li>';
		}
		$html .= '</ol>';
		$html .= '</li>';
	}
  if (isset($person['friends'])) {
      $html .= '<li>';
      $html .= $person['friends'] .'</li>';
    }

  $html .= '</ul>';
  $html .= '</div>';

  return $html;
}
?>

前端 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Personal Information</title>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#letter-a a').click(function (event) {
                event.preventDefault();
                var requestData = { name: $(this).text() };
                $.get('a.php', requestData, function (data) {
                    $('#container').hide().html(data).fadeIn();
                });
            });

            $('body').on('click', 'h3.name', function () {
                $(this).siblings('.info_list').slideToggle();
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <div class="letter" id="letter-a">
            <h3><a href="#">John</a></h3>
            <h3><a href="#">Rose</a></h3>
            <h3><a href="#">James</a></h3>
        </div>
        <div id="container" class="context">
        </div>
    </div>
</body>
</html>

.on()方法告诉浏览器密切注意页面上发生的任何单击事件。当（且仅当）被单击的元素与h3.term选择符匹配时，才会执行事件处理程序。这样，无论单击哪个词条，都可以正常切换相应的解释，即使对应的解释内容是通过Ajax后来添加到文档中的也没有问题。